在jquery上动态编写点击事件答案

【问题标题】：Write click event dynamically on jquery在jquery上动态编写点击事件
【发布时间】：2016-05-03 19:41:14
【问题描述】：

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

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

但这是我尝试过的逻辑

准备好内部文档
像 html 一样遍历 jquery
编写点击事件以在他们点击 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

【问题讨论】：

标签： javascript php jquery html laravel

【解决方案1】：

为所有带有“jl_*”的html添加一个基本的“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/

【讨论】：

【解决方案2】：

会将唯一标识符移动到不同的属性，并将公共类添加到所有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();
})

【讨论】：

谢谢，默认情况下jl 的所有类都应该隐藏？
是的..通常比使用 css 更好...不必等待脚本准备好
谢谢我已经创建了小提琴，我可以知道如何默认触发第一个 cl_* 吗？ jsfiddle.net/aaaf6us4/7
可以使用 css :first-of-type 选择器来显示每个的第一个。很容易在谷歌中搜索到它是如何工作的
谢谢，我会做的:)

【解决方案3】：

您并不想为此使用类——不过，自定义数据属性是有意义的。就像 <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”更有意义的名称也很好——类通常应该是语义的。

【讨论】：