javascript - 如何在 JavaScript 中使用单个循环在就绪函数中显示隐藏多个 id？

Question

我想将其作为这个就绪函数的循环，但我最终这样做了:

$(document).ready(function () {

  $('#p1-show').click(function () { $('#p1').show(); });
  $('#p1-hide').click(function () { $('#p1').hide(); });

  $('#p2-show').click(function () { $('#p2').show(); });
  $('#p2-hide').click(function () { $('#p2').hide(); });

  $('#p3-show').click(function () { $('#p3').show(); });
  $('#p3-hide').click(function () { $('#p3').hide(); });

  $('#p4-show').click(function () { $('#p4').show(); });
  $('#p4-hide').click(function () { $('#p4').hide(); });

  //there will be ids' for 300+ show hide

});

Answer 1

您可以使用自定义 data-* 前缀属性将元素关联为 show() 和 hide()，该属性可以重试使用.data(key)。

使用它，您可以使用类选择器来绑定(bind)事件处理程序。

HTML

 <button class="show" data-target="#p1">show p1<button>
 <button class="hide" data-target="#p1">hide p1<button>

脚本

$(document).ready(function () {
    $('.show').click(function () {
        $(this).data('target').show();
    });
    $('.hide').click(function () {
        $(this).data('target').hide();
    });
})