javascript - 显示隐藏 div jQuery

Question

我正在尝试为我的网站制作一个显示隐藏 div 功能。但我有一个关于多个显示隐藏按钮的问题。所以问题是，当我单击容器 div 中的显示按钮时，所有蓝色 div 都会自动显示。

您可以看到DEMO .

HTML:

<div class="container">
  <div class="div">
    <div id="hidediv">Hide</div>
  </div>
  <div class="test"></div>
  <div id="showdiv">Show</div>
  
</div>
<div class="container">
  <div class="div">
    <div id="hidediv">Hide</div>
  </div>
  <div class="test"></div>
  <div id="showdiv">Show</div>      
</div>

JavaScript:

$(document).ready(function() {
    $("#hidediv").hide();
    $('#showdiv').click(function() {
        $('.div').toggle("slide");
        $("#showdiv").hide();
        $("#hidediv").show();
            
    });
    $('#hidediv').click(function() {
        $('.div').toggle("slide");
        $("#hidediv").hide();
        $("#showdiv").show();                
    });    
});

当用户单击容器显示div中的显示按钮时，我只想显示这个div。希望你能理解我。

Answer 1

首先你应该使用类而不是id。固定的 HTML 变为:

<div class="container">
    <div class="div">
        <div class="hidediv">Hide</div>
    </div>
    <div class="test"></div>
    <div class="showdiv">Show</div>
</div>

等等。这是最灵活的方法，因为现在您可以根据需要添加任意数量的可折叠容器，而无需更改 JS 代码。

Javascript 代码可以是(使用 on 方法进行更有效的事件处理):

$('.container').on('click', '.showdiv', function(e) {
    var $container = e.delegateTarget;
    $('.div', $container).toggle('slide');
    $('.showdiv', $container).hide();
    $('.hidediv', $container).show();
})
.on('click', '.hidediv', function(e) {
    var $container = e.delegateTarget;
    $('.div', $container).toggle("slide");
    $(".hidediv", $container).hide();
    $(".showdiv", $container).show();
});

演示:http://jsfiddle.net/1j32cwLg/