Question

假设我有一些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();}

然后将这些功能附加到链接或其他任何内容。抽象出这种行为的最佳做法是什么？代码总量在N ^ 2处随着div的数量增长，这是不好的。

Answer 1

给你想隐藏一个公共类名的所有div，然后显示其中一个。像：

HTML：

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

现在是js：

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

Answer 2

我处理这个问题的方法是先隐藏它们，然后显示你想要的一个（或多个）。

像...一样的东西。

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

当然，您不想隐藏每个 div，因此您需要使用自己的标记设置.container。

Answer 3

对于每次点击，您可以隐藏所有div，然后只显示您需要的那个。

你可以使用一个类来标记所涉及的div ......

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

并使用：

$(".collapse").hide();

Answer 4

你可以通过在所有这些元素中添加一个公共类来做类似的事情：

<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
});

Answer 5

您可以使用:not()选择器。

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

Answer 6

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

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

//免责声明 - 我没有检查连接选择器是否有效，但是从一个声誉良好的博客中进行了调整。

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

6 个答案: