用jQuery隱藏/顯示多個div的最佳實踐

假設我有一些div允許用戶在兩者之間切換。我會寫這樣的功能：用jQuery隱藏/顯示多個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，這是不好的。

來源

2011-04-25 Chris Bisignani

對於每次點擊，您可以隱藏所有的div，然後只顯示您需要的。

你可以使用一個類來標記的div參與...

及用途：

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

來源

2011-04-25 18:14:14

我處理這是以前只是用來掩飾他們都那麼的方式顯示你想看到的一個（或多個）。

喜歡的東西...

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

就算你不想隱瞞每div所以你需要設置任何.container是自己的標記。

來源

2011-04-25 18:15:07

給所有那些你想隱藏一個公共類名的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();}

來源

2011-04-25 18:15:43

你可以這樣做，加入了通用類，所有這些元素：

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

來源

2011-04-25 18:15:47

你可以使用:not()選擇器。

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

來源

2011-04-25 18:16:34 Patrick

也許我不理解的問題，但它似乎像什麼他想要是沿着這些路線的東西：

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

//聲明 - 我沒有檢查，看看是否級聯選擇作品，但改編自一個有聲望的博客。

來源

2011-04-25 18:38:30

用jQuery隱藏/顯示多個div的最佳實踐

回答

相關問題