javascript - 用于多绘图的 jQuery 就绪函数

Question

我正在尝试对多个 id 使用 jQuery ready 函数，以便它们单独显示和隐藏，而无需一次又一次地编写相同的类型。当我尝试在同一行上使用它时，它会同时打开所有绘图。代码看起来像这样 -

<script type="text/javascript">
$(document).ready(function(){
  $('#p1','#p2', '#p3','#p4').hide();
  $('#p1-show','#p2-show','#p3-show','#p4-show').click(function(){
    $('#p1','#p2','#p3','#p4').show();
  });
  $('#p1-hide','#p2-hide','#p3-hide','#p4-hide').click(function(){
    $('#p1','#p2','#p3','#p4').hide();
  });
});
</script>

Answer 1

你的函数隐藏了所有这些。如果您想根据单击的显示/隐藏按钮来隐藏绘图，可以使用 $(this) 查找相应的绘图。

确切的代码取决于元素的结构，但想法是使用 $(this) 来定位被单击的元素，并从那里找到要隐藏的元素.

这是一个例子:

$(document).ready(function(){
  $('#p1, #p2, #p3, #p4').hide();
     $('#p1-show, #p2-show, #p3-show, #p4-show').click(function(){
          $(this).parent().find('p').show();
        });
     $('#p1-hide, #p2-hide, #p3-hide, #p4-hide').click(function(){
          $(this).parent().find('p').hide();
        });
    });

div {
  margin: 10px;
  padding: 10px;
  background-color: #eee;
  border-radius: 10px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p id="p1">First Drawing</p>
  <button id="p1-show">Show</button>
  <button id="p1-hide">Hide</button>
</div>
<div>
  <p id="p2">Second Drawing</p>
  <button id="p2-show">Show</button>
  <button id="p2-hide">Hide</button>
</div>
<div>
  <p id="p3">Third Drawing</p>
  <button id="p3-show">Show</button>
  <button id="p3-hide">Hide</button>
</div>
<div>
  <p id="p4">Fourth Drawing</p>
  <button id="p4-show">Show</button>
  <button id="p4-hide">Hide</button>
</div>