知らないと地味にだるい。
やってく
buttonをクリックしたら同値のdataのやつが発火する的なのにするとして。
<button type="button" data-target="01"></button>
<button type="button" data-target="02"></button>
<button type="button" data-target="03"></button>
<ul>
<li data-target="01"></li>
<li data-target="02"></li>
<li data-target="03"></li>
</ul>
これでやってくとして。
変数で指定
$(function(){
$('button').on('click',function(){
var target = $(this).data('target');
$('li[data-target="'+target+'"]').slideToggle();
})
})
条件分岐で指定
$(function(){
$('button').on('click',function(){
var target = $(this).data('target');
$('ul').find('li').each(function(){
if($(this).data('target') === target){
$(this).slideToggle();
}
})
})
})
まとめ
data属性を扱うときは処理が重くなるらしいんで、直接指定で済む程度のボリュームだったらidで指定するとかのほうがいいはずという大前提。
上記2種の使い分けは発火内容を変えたいかどうかですね。
コメント