Jquery：隐藏所有子元素，然后显示特定元素

Question

我想隐藏一个div中的所有子元素。然后根据传递给函数的特定元素来显示其中一个。

function subDisplay(name) {
   $("#navSub").each(function() {
      $(this).hide();
   });
   $(name).show();
}

然后我像这样从一个onmouse事件调用该函数：subDisplay(#DivIwantToShow); 但是没有显示任何内容...

我做错了什么？

- Christian Bekker

---

name 参数中传递的是什么？是一个 jQuery 对象还是选择器？另外，从你的代码中可以看出你有多个 #navSub，这是非法的 HTML - 页面中只能有一个唯一的 ID - 应该使用类代替。 - Bojangles

你是真的在调用 subDisplay(#DivIwantToShow); 吗？ - J. Holmes

你需要使用 subDisplay('#DivIwantToShow'); -- 这是一个你需要传递的字符串。 - js-coder

你可以通过调用$('#navSub').hide()来优化你的代码，而不是使用each()进行迭代。 - Matt

你实际上是在使用 subDisplay(#DivIWantToShow) 还是在使用 subDisplay("#DivIWantToShow")？另外，如果在 subDisplay 中，你使用 console.log(name) 会发生什么？ - Wing

Answer 1

你需要隐藏子元素而不是包含它们的 div。

$("#navSub").children().hide();

所以现在，如果你想要显示的 div 是父 div 中的一个元素，则该元素仍然会显示，而其他元素则保持隐藏。

- Brandon Kindred

---

相当简单和不错，但是我想补充一点，你可以使用 toggle() 使生活更加轻松。 - clockw0rk

Answer 2

如果你想要针对 #navSub 的子元素进行操作，你需要选中并隐藏它们，而不是选择 navSub 元素本身；你可以使用 children() 方法来实现。

function subDisplay(name) {
    $('#navSub').children().hide();
    $(name).show();
};

否则，你的DOM中似乎有多个具有相同ID的元素，这是不允许的。

然后，你需要将一个字符串（它是一个有效的jQuery选择器）传递给subDisplay()函数；

subDisplay('#DivIwantToShow');

- Matt

Answer 3

如果传递了元素的名称，请使用以下内容：

    if($(this).attr('name') != name){
    //Hide it
    } else {
   //show it
}

- Teun Pronk

Answer 4

function subDisplay(name) {
   $("#navSub").hide();
   $('#'+name).show();
}

- kaz

Answer 5

总结一下@dotweb和@Matt的精彩评论：

function subDisplay(name) {
   $('#navSub').hide();
   $(name).show();
}

subDisplay('#DivIwantToShow');

- Stefan

Answer 6

尝试将它放在循环外面，像这样：

function subDisplay(name) {

     $("#navSub").hide();

     $(name).show();
}

http://jsfiddle.net/peduarte/m2pj8/

- peduarte

Answer 7

如果你想使用类来隐藏子元素div。

<div class="parent_div">
    <div class="child_div">1st div</div>
    <div class="child_div">2nd div</div>
</div>

$(document).ready(function(){
    $(".parent_div").on('click',function(){
        $j(this).find("div").toggle();
    })
})

- Chaitanya Bhojne