Javascript 使用jQuery隐藏/显示多个div的最佳实践

假设我有一些div，我想让用户在它们之间切换。我将编写如下函数：

show_A = function () {$('.a').show(); $('.b').hide(); $('.c').hide();}
show_B = function () {$('.a').hide(); $('.b').show(); $('.c').hide();}
show_C = function () {$('.a').hide(); $('.b').hide(); $('.c').show();} 

---

然后将这些函数附加到链接或任何东西上。抽象出这种行为的最佳实践是什么？代码总量随着div数的增加而增加N^2，这是不好的。

每次单击，您可以隐藏所有div，然后只显示所需的div

您可以使用类来标记所涉及的div

<div id="a" class="collapse">...</div>
<div id="b" class="collapse">...</div>
<div id="c" class="collapse">...</div>

---

对于每次单击，可以隐藏所有div，然后仅显示所需的div

您可以使用类来标记所涉及的div

<div id="a" class="collapse">...</div>
<div id="b" class="collapse">...</div>
<div id="c" class="collapse">...</div>

---

我以前处理这个问题的方法是，将它们全部隐藏起来，然后显示希望可见的一个（或多个）

类似于

var showSingleDiv = function(klass) {
    $('.container > div').hide();
    $(klass).show();
};

---

当然，你不想隐藏每个

div

，所以你需要用你自己的标记设置

.container

中的任何内容。

我以前处理这个问题的方法就是将它们全部隐藏，然后显示你想要显示的一个（或多个）

类似于

var showSingleDiv = function(klass) {
    $('.container > div').hide();
    $(klass).show();
};

---

当然，您不想隐藏每个

div

，因此您需要使用自己的标记设置

.container

中的任何内容。

为所有要隐藏的div指定一个公共类名，然后显示其中一个。比如：

html:

---

为所有要隐藏的div指定一个公共类名，然后显示其中一个。比如：

html:

---

您可以通过向所有这些元素添加公共类来执行以下操作：

<div class="toggle">a</div>
<div class="toggle">b</div>
<div class="toggle">c</div>

$('.toggle').click(function(){
    $('.toggle:visible').hide();    //Hide all visible 'toggle' div's
    $(this).show();                 //Show the clicked div
});

a
B
C
$（'.toggle'）。单击（函数（）{
$（'.toggle:visible'）.hide（）；//隐藏所有可见的“toggle”div
$（this）.show（）；//显示单击的div
});

您可以通过向所有这些元素添加公共类来执行以下操作：

<div class="toggle">a</div>
<div class="toggle">b</div>
<div class="toggle">c</div>

$('.toggle').click(function(){
    $('.toggle:visible').hide();    //Hide all visible 'toggle' div's
    $(this).show();                 //Show the clicked div
});

a
B
C
$（'.toggle'）。单击（函数（）{
$（'.toggle:visible'）.hide（）；//隐藏所有可见的“toggle”div
$（this）.show（）；//显示单击的div
});

您可以使用

：not（）

选择器

show_A = function () {$('.a').show(); $('div:not(.a)').hide();}

您可以使用

：not（）

选择器

show_A = function () {$('.a').show(); $('div:not(.a)').hide();}

---

也许我不理解这个问题，但似乎他想要的是这样的东西：

$('div').each().click( function(){
    var cls = $(this).attr('class');
    if( $("div[class*='"+cls+"']").is(':visible')){ $("div[class*='"+cls+"']").hide();}//
    else{ $("div[class*='"+cls+"']").show(); }
}
);

---

//免责声明-我没有检查连接的选择器是否有效，但从一个著名的博客中修改了它。

也许我不理解这个问题，但似乎他想要的是以下几点：

$('div').each().click( function(){
    var cls = $(this).attr('class');
    if( $("div[class*='"+cls+"']").is(':visible')){ $("div[class*='"+cls+"']").hide();}//
    else{ $("div[class*='"+cls+"']").show(); }
}
);

//免责声明-我没有检查连接的选择器是否有效，但从一个著名的博客中修改了它