Question

我需要显示/隐藏一些div，具体取决于所选的选项。我正在使用.change函数。

HTML看起来更像是这样：

<div id="1" style="display:none">
</div>
<div id="WRAP">
  <div id="2" style="display:none">
  </div>
  <div id="3" style="display:none">
  </div>
</div>
<div id="4" style="display:none">
</div>

jQuery的：

$(function(){
$('#fyo').change(function(){ 
        $('#' + $(this).val()).show('slow').children().show('slow');
        $('#' + $(this).val()).siblings().hide('slow');
        $('#' + $(this).val()).parent().show('slow').siblings().hide('slow');

    }); 
});

我不会为选项编写代码，但只是FYI选项如下：

Choose option: 1  or  2  or  3  or 4  or WRAP (so 2 & 3).

应该可以：

分别显示每个div，包括内部div - 隐藏所有其他div;
<div id="WRAP">应同时显示所有内部div。

我实现的结果（几乎）正是我所需要的，但由于我是jQuery的初学者，我想知道这是否正确？或者有没有更简单的方法来实现这一目标？有一件事让我怀疑某些事情确实是错误的 - 当我选择2或3时，它不会以'slow'的风格显示，而是几乎立即出现并且看起来有些错误，因为它没有没那么顺利。

Answer 1

 $('#' + $(this).val()).parent().show('slow').siblings().hide('slow');

这可能会破坏你不想改变的元素。例如，如果

<body>
    <div class="AnimatedDivs">
        <div id="1" style="display:none">
        </div>
        <div id="WRAP">
          <div id="2" style="display:none">
          </div>
          <div id="3" style="display:none">
          </div>
        </div>
        <div id="4" style="display:none">
        </div>
    </div>
    <div class="Content">
    </div>
</body>

然后选择 1 然后

$('#' + $(this).val()).parent() //Basically selects div with class "AnimatedDivs"
                      .show('slow') //Does show animation on it
                      .siblings() // select all siblings (this would include div with class "Content")
                      .hide('slow'); //Now hide it ( so now div.Content is hidden )

最好给他们所有类似“hideableDiv”的类，并使用它作为选择器进行操作;

<div id="1" class="hideableDiv" style="display:none">
</div>
<div id="WRAP" class="hideableDiv">
  <div id="2" class="hideableDiv" style="display:none">
  </div>
  <div id="3" class="hideableDiv" style="display:none">
  </div>
</div>
<div id="4" class="hideableDiv" style="display:none">
</div>

$('#fyo').change(function(){ 

    var divToShow = $('#'+$(this).val());

    //Hide them all except the one being shown, .not function removes the passed object from its selection
    $(".hideableDiv").not(divToShow).hide('slow');

    //Now show the one that was selected
    divToShow.show('slow');
    //Select parent (if it has class hideableDiv ) and show it
    divToShow.parent(".hideableDiv").show('slow');

    //If WRAP selected also show the children as well
    if( $(this).val() == "WRAP" )
        divToShow.children().show('slow');

});

嵌套div - .change函数和show / hide兄弟姐妹，孩子和父母

1 个答案: