javascript - 在 jquery 上动态编写点击事件

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

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

但这是我试过的逻辑

1. 准备好内部文件
2. 像 html 一样遍历 jquery
3. 编写点击事件以在点击cl_*时显示隐藏
4. 触发第一次出现的点击事件。

不用担心生成的 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();
})

组成比“cl”和“jl”更有意义的名称也很好——类通常应该是语义化的。