javascript - 如何做到第一类型

Question

这是我的 fiddle

这是我的 HTML

<div class='cl' data-gen='1'>One</div>
<div class='cl'  data-gen='5'>Two</div>
<div class='cl'  data-gen='6'>Three</div>
<br>
<div class='jl jl_1' style='display:none'>Alpha</div>
<div class='jl jl_1' style='display:none'>Andrew</div>
<div class='jl jl_1' style='display:none'>Christ</div>
<div class='jl jl_5' style='display:none'>Anto</div>
<div class='jl jl_5' style='display:none'>Brito</div>
<div class='jl jl_6' style='display:none'>Oyster</div>
<div class='jl jl_6' style='display:none'>Beta</div>

这是我的 JS

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

我想默认显示第一个jl_1。我怎样才能做到这一点 ？

请帮忙

Answer 1

没有 JavaScript:

我只是将 display: none 保留在标记中的第一个元素之外。

使用 JavaScript:

但是如果您需要使用 JavaScript，那么我会让您的“show”函数可重用:

function jlShow(entry) {
   $('.jl').hide().filter('.jl_' + entry ).show();
}

然后:

jlShow(1);
$(document).on('click','.cl',function(){
   jlShow( $(this).data('gen') );
});

这样，如果您需要更改选择器等，您可以在一个位置进行操作，而不是多个位置。

<小时/>

旁注:data 不仅仅是只是 data-* 属性的访问器。它为元素设置 jQuery 数据缓存。如果您只需要属性，请使用 attr，而不是 data。