jQuery就绪函数为多个图纸

Question

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

<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

以前的答案会工作，但万一有很多这样的图纸，然后让一个#ID所有这些成为严重重复的，应予以避免。以下是一段代码片段，使其更加健壮，没有太多硬编码的#ids。

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

Answer 2

您的函数隐藏了所有这些函数。如果要根据单击哪个显示/隐藏按钮来隐藏绘图，则可以使用$(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>

Answer 3

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

对于每个“绘图”，您都应该具有相同的标记，这也使您对此“模块”的复制也变得更容易。

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