要素をクリックしたら、クリックした直近要素のdata属性の値を取り出したい。
通常data属性の値を取得するには、
$(‘要素’).data();
と書きます。普通にこう書けばいいのですが、今回はたまたまchildrenを使う機会に恵まれたので、そのメモです。
クリックで特定の要素のdata属性の値を取得
実際のコードはこんな感じです。
____html_____________
<div class=”js-click”>
<i class=”icon” data-id=”sample1(この値が欲しい)“></i>
</div>
・
・
・（foreachで繰り返し出力）
・
・
<div class=”js-click”>
<i class=”icon” data-id=”sample10″></i>
</div>
以下はjQueryのコード
$(‘.js-click’).on(‘click’, function(){
var $this = $(this);
var $getId = $this.children().data(‘productid’);
console.log( $getId ); //クリックした要素のdataの中身が入る
}
var $this = $(this);
var $getId = $this.children().data(‘productid’);
console.log( $getId ); //クリックした要素のdataの中身が入る
}
クラス属性 .js-clickをクリックすると、そのドムが 変数 $this に入り、
$this.children().data(‘productid’);
の部分で「その子要素のdata属性の’productid’を取得」させ、その中身を変数$getIdに入れる。
という流れになります。無事、任意のdataの中身を取得できました。
toggleClassも使ってみる
また、toggleClassと連動させたい場合。
HTMLはさっきのコードと同じですが、.js-clickをクリックすると、その子要素のiconクラスにだけactiveクラスをつけたり外したりしたいです。
____html_____________
<div class=”js-click”>
<i class=”icon (ここにactiveクラスを付け外ししたい)” data-id=”sample1″></i>
</div>
・
・
・（foreachで繰り返し出力）
・
・
<div class=”js-click”>
<i class=”icon” data-id=”sample10″></i>
</div>
jQueryはこんな感じです。
$(‘.js-click’).on(‘click’, function(){
var $this = $(this);
$this.children(‘.icon’).toggleClass(‘active’);
}
var $this = $(this);
$this.children(‘.icon’).toggleClass(‘active’);
}
これで、任意の子要素にある icon クラスに active クラスをつけたりはずしたりできました！！
補足
closest・parent は直近の親要素を探すのでこの場合は当てはまらず、siblings ・findも結果はundefindになってしまい、data属性の値をとることができませんでした(今回の構造では)。
