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

您可以使用自定义show()前缀属性将元素关联为hide()和data-*，可以使用.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循环它会帮助你

＆＃13;

$(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+*/

});

＆＃13;

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

＆＃13;

如何在javaScript中用单个循环显示在ready函数中隐藏多个id？

4 个答案: