jquery - ボタンIDと同じ名前と同じクラス名のdivでフェードイン

Question

フェードインしたい div ID と同じクラス名を共有するボタンがいくつかあります。

例：

 <div class="one">button</div>

 <div id="one">I am the one div that needs to fade in</div>


 <div class="two">button</div>

 <div id="two">I am the two div that needs to fade in</div>

Answer 1

ボタンには共通のクラス/タグを使用し、ターゲット ID には data-* 属性を使用して、クリック ハンドラーで取得する必要があります。

HTML:

 <div class="button" data-target="one">button</div>

 <div id="one">I am the one div that needs to fade in</div>


 <div class="button" data-target="two">button</div>

 <div id="two">I am the two div that needs to fade in</div>

JS:

$(document).on('click', '.button', function() {
  var id = $(this).data('target');
  $('#' + id).fadeIn();
});