Question

这是原始的html

<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都不是标准的，因为它们来自数据库。

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

但这是我尝试过的逻辑

内部文件就绪
循环遍历jquery，如html
如果点击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
});

更新：

这是我到目前为止的Fiddle

Answer 1

你并不是真的想要使用类 - 但是自定义数据属性是有意义的。与其他元素<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();
})

组成比＃34; cl＆＃34;更有意义的名字也是一件好事。和＆＃34; jl＆＃34; - 类通常应该是语义的。

Answer 2

将唯一标识符移动到其他属性，并向所有J组添加公共类

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

JS

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

Answer 3

添加基地＆＃34; jl＆＃34;将所有带有＆＃34; jl _ *＆＃34;的所有html分类这样你就可以访问任何具有＆＃34; jl＆＃34;然后将类切换为隐藏或不隐藏，如下所示：

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/

在jquery

3 个答案: