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();
});