如何在 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)重试。

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

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

Answer 2

 $(document).ready(function () {
    for(var i =1; i< 5; i++){ 
        $(`#p${i}-show`).click(function () { $(`#p${i}`).show(); });
        $(`#p${i}-hide`).click(function () { $(`#p${i}`).hide(); });
    }
  });

Answer 3

不要使用循环。使用子字符串匹配属性选择器。

$("[id$=show]").on("click", function () {
    $("#" + this.id.replace("-show", "")).show();
}):
$("[id$=hide]").on("click", function () {
    $("#" + this.id.replace("-hide", "")).hide();
}):

Answer 4

尝试使用这个 for 循环它会帮助你

$(document).ready(function() {
  for (var i = 0; i <= 300; i++) {
    $('#p' + i + '-show').click(function() {
      $('#p' + i).show();
    });
    $('#p' + i + '-hide').click(function() {
      $('#p' + i).hide();
    });
  }
  /* $('#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+*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>