淡入div，其类名与我的按钮ID相同

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