Question

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

ready

Answer 1

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

确切的代码将取决于元素的结构，但我们的想法是使用$(this)来定位被单击的元素，然后从中找到要隐藏的元素。

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你真的不需要所有这些选择器。这太过分了。

每个'绘图'都应该让你的标记完全相同，这样你也可以更容易地复制这个'模块'。

$(document).ready(function(){
//this hides all of your <p> on page load
  $('p').hide();
  //this adds the click event to all the buttons with 'show'
  $('.show').on('click', function(){
      $(this).parent().find('p').show();
  });
  $('.hide').on('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>1st Image</p>
 <button class="show">show</button>
 <button class="hide">hide</button>
</div>
<div>
 <p>2nd Image</p>
 <button class="show">show</button>
 <button class="hide">hide</button>
</div>
<div>
 <p>3rd Image</p>
  <button class="show">show</button>
 <button class="hide">hide</button>
</div>
<div>
 <p>4th Image</p>
  <button class="show">show</button>
 <button class="hide">hide</button>
</div>
<div>
 <p>5th Image</p>
 <button class="show">show</button>
 <button class="hide">hide</button>
</div>

Answer 3

之前的答案是有效的，但是如果有很多这样的图纸，那么给所有这些图纸提供#id会变得非常重复，应该避免。以下是一个代码片段，使其更加健壮，没有太多硬编码的#id。

$(function(){
    $('.toggle-btn').on('click', function(){
        var root = $(this).closest(".picture-container");
        var img = $(root).find("img");
        $(img).toggle();
    });
});

body > div {
  margin: 10px;
  padding: 10px;
  background-color: #eee;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
<div class="picture-container">
  <button class="toggle-btn">Show/Hide</button>
  <div>
     <img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
  </div>
</div>
<div class="picture-container">
  <button class="toggle-btn">Show/Hide</button>
  <div>
     <img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
  </div>
</div>
<div class="picture-container">
  <button class="toggle-btn">Show/Hide</button>
  <div>
     <img src="http://24.media.tumblr.com/tumblr_lggvvf2mCm1qgnva2o1_500.gif">
  </div>
</div>

用于多个绘图的jQuery就绪函数

3 个答案: