地味に使える。
どういうことか
例えばこんなのがあったとして。
<ul class="select">
<li><a id="select01">select 01</a></li>
<li><a id="select02">select 02</a></li>
<li><a id="select03">select 03</a></li>
</ul>
<ul class="tab">
<li id="tab01"></li>
<li id="tab02"></li>
<li id="tab03"></li>
</ul>こんな感じで動かす。
$('#select01').click(function(){
$('.tab li').hide();
$('#tab01').show();
})
$('#select02').click(function(){
$('.tab li').hide();
$('#tab02').show();
})
$('#select03').click(function(){
$('.tab li').hide();
$('#tab03').show();
})連番拾ってまとめろよって話じゃなくて。
発火元やら発火先の指定にidを使うのは珍しくない。だけどidってのはページ単位でのユニークなアレなので、乱用すると他と被ってめんどくさいことになる可能性がある。この使い方だと大量のidを生成するわけで、もし修正が必要になったら書式を合わせて全部変更しなきゃとか面倒くささが凄い。タブ選択みたいなjsの動作においてはjs内で個別の指定が確実にできることが重要だから、idじゃなくてもよくない？という話。
classで良くない？
idを使いたくないならclassを使えばいい。それも間違ってない。
でも、js用に作ったclassがcssで指定されてたらstyleがついてめんどくさいことになる可能性がある。
自己流で覚えたのでまともな素地のない考え方がベースになってる手前あんまり自信を持って言えることじゃないけど、そんな感じでclassを使うのは極力止めた方がいいと思う。組むときはいいんだけど、後から手を入れた際に知らずに追加して被ったら難儀する。
並び順でどうのこうのもできるじゃん
発火元が何番目の要素なのかを取得して、同じ位置のタブを表示させる方法もある。これなら、HTMLの組み方だけが条件なので、idやらclassを使わずに済む。
だけどやっぱりこれも不安定。作ったときはいいけど手をいれる時にその仕組を把握してなかったら壊れる可能性が出てくる。順番が入れ替わったら詰む。要因として考えるなら、もっと気を使っていじれよって気もするけど。まあ単純なところでは、選択肢の並びを変えたらタブの並びも合わせて変更しなきゃいけなくてめんどくさいよねって。
data属性を使う
こういうの。
<div data-example="hogehoge">あああああ</div>「data-***」のルールで作れて、js側で取得もできる。data属性は複数設定することができる。属性自体を複数つけることも、値を複数入れることもできる（要配列）。
cssでもdata属性を指定することはできるけど装飾のために指定するなんてことは正攻法じゃないというか稀というか局地的というかレアケースなので、js用の枠として割り切って使うことができる。
data属性で指定する例
発火元と発火先にdataを仕込む。
<ul class="select">
<li><a data-select="tab01">select 01</a></li>
<li><a data-select="tab02">select 02</a></li>
<li><a data-select="tab03">select 03</a></li>
</ul>
<ul class="tab">
<li data-tab="tab01"></li>
<li data-tab="tab02"></li>
<li data-tab="tab03"></li>
</ul>data属性を拾って指定してやっていく。
$('.select a').click(function(){
target = $(this).data('select');
$('.tab li').hide();
$('.tab li[data-tab='+ target +']').show();
})data属性自体を振り分けられるので値を同じにしても発火元と発火先の棲み分けはきちんとできる。値を引っ張ってくるだけなのでめっちゃ楽。この組み方だと値が合致してれば動くので各々好き勝手に書ける。
どうでしょうか。
同一処理の一元管理
ポップアップを閉じる動作は色々ある。一昔前は「✕」を押さない限り消えなかったけど、余白部分をクリックしても消えるのが当たり前になってきた。idで管理するとそれぞれにユニークを振ってそれぞれをjsで指定しなきゃいけないんだけど、それはめんどいよねと。
普段よくやる構成での例。
<div class="popup">
<div class="wrap">
<div class="bg" data-role="close"></div>
<div class="set">
<div class="close"><span data-role="close"></span></div>
<div class="inner">
～中身～
<div class="close_inner"><span data-role="close">閉じる</span></div>
</div>
</div>
</div>
</div>枠外、背景、枠内に「閉じる」を仕込む。
$('.popup [data-role="close"]').click(function(){
$('.popup').fadeOut();
})めちゃくちゃスッキリする。
classでもできることだけど、classを使わないのは精神衛生にすごくいい。
コメント