写点击事件动态jQuery的

这里是原始的HTML写点击事件动态jQuery的

<div class='cl_{{ $gen }}'>{{$gen->name}}</div> 
<div class='jl_{{ $var }}'>{{$gen->name}}</div>

循环在这里后，我得到了作为输出的HTML

我想，如果我在类cl_x点击做，那么jl_x应该是可见的，其他应该是隐藏的，默认情况下，第一个cl_1应该是可见的。我怎样才能做到这一点？

<div class='cl_1'>One</div> 
<div class='cl_5'>Two</div> 
<div class='cl_6'>Three</div> 
<br> 
<div class='jl_1'>Alpha</div> 
<div class='jl_1'>Andrew</div> 
<div class='jl_1'>Christ</div> 
<div class='jl_5'>Anto</div> 
<div class='jl_5'>Brito</div> 
<div class='jl_6'>Oyster</div> 
<div class='jl_6'>Beta</div>

注：所有1,5,6都不是标准的，因为它们是从数据库中来。

我真的无法想象如何实现这一目标。帮助请

但这里是我已经尝试了逻辑

里面的文件准备
遍历像HTML jQuery的
写click事件显示隐藏，如果他们依序按上CL_ *
触发首次发生的点击事件。

不要担心生成的HTML，但需要的是动态地写了jQuery事件或别的东西

但不能能够实现代码请帮助

脚本：

$(document).ready(function() { 
//not sure whether i should loop over the jquery itself or write anything like the element starts with cl-* like that 
});

更新：

这里为t他Fiddle我到目前为止

来源

2016-01-27 Biz Dev B

会唯一标识符移动到不同的属性，并添加一个公共类所有J组

<div class='cl' data-gen="{{ $gen }}">{{$gen->name}}</div> 
<div class='jl jl_{{ $var }}'>{{$gen->name}}</div>

$(document).on('click','.cl',function(){ 
    $('.jl').hide().filter('.jl_' + $(this).data('gen')).show(); 
})

来源

2016-01-27 02:03:03 charlietfl

谢谢，默认情况下所有类的'jl'都应该隐藏？ –

是啊..通常更好的与CSS ...不必等待脚本准备好 – charlietfl

谢谢我创建了小提琴，我可以知道如何触发第一个CL_ *默认情况下？ https://jsfiddle.net/aaaf6us4/7/ –

为所有的html添加一个基础“jl”类，它包含任何带有“jl_ *”的任何东西，以便您可以访问具有“jl”类的所有内容，然后将其隐藏或不隐藏，像这样：

HTML：

<div class='cl {{ $gen }}'>{{$gen->name}}</div> 
<div class='jl {{ $var }}'>{{$gen->name}}</div>

JS：

$(document).on('click', '.cl', function(e){ 
    var classes = ($(e.target).attr("class").split(' ')); 
    $('.jl').toggleClass("hide"); 
    $('.jl' + "."+ classes[1]).toggleClass("hide"); 
});

风格：

.hide{ 
display: none; 
}

https://jsfiddle.net/rc368gjp/

来源

2016-01-27 02:00:48 RichG

你能请更新这个小提琴PLS .. HTTPS： //jsfiddle.net/aaaf6us4/ –

分叉小提琴并更新它：https://jsfiddle.net/rc368gjp/ – RichG

你不是真的想用类这一点 - 一个自定义的数据属性是有道理的，但。像<div class="cl" data-number="{{ $gen }}">与<div class="jl" data-number="{{$var}}">上的其他元素。

然后里面的$(document).ready(...)你可以这样做：

$('.jl').hide().first().show(); 
$('.cl').click(function(){ 
    $('.jl').hide().filter('[data-number="' + $(this).data('number') + '"]').show(); 
})

这也将是很好的弥补了“瘦肉精”和“JL”更有意义的名称 - 类一般应语义。

来源

2016-01-27 02:01:17

谢谢。你可以在这个小提琴上更新这个https://jsfiddle.net/aaaf6us4/ –

写点击事件动态jQuery的

回答

相关问题