在jquery中爲隱藏/顯示使用按鈕做一個簡單的腳本

Question

我是一個初學者，不記得jQuery中的所有腳本。

我想要做的就是讓我的hide/show div有更簡單的腳本。 不喜歡我的腳本：

<div id="aaa"> 
<div id="bbb"> 
<div id="ccc"> 

<button id="bt1"> 
<button id="bt2"> 
<button id="bt3"> 

$("#bt1").click(function){ 
    $("#aaa").show(); 
    $("#bbb").hide(); 
    $("#ccc").hide(); 
    }); 

and so on... 

感謝

Answer 1

function hideAll(){ 
    $("#bbb,#ccc,#aaa").hide(); 
} 

$("#bt1").click(function){ 
//hide 
    hideAll(); 
//show 
$("#aaa").show(); 
}); 

，如果你想顯示和隱藏要素即是。

Answer 2

它不會比你有什麼要簡單得多。

你可以你的兩個.hide呼叫組合成一個，但僅此而已：

$("#bbb,#ccc").hide(); 

Answer 3

我不知道什麼是真正需要的，但是嘗試這個

<button id="bt1"> 
<div id="aaa"> 
<button id="bt2"> 
<div id="bbb"> 
<button id="bt3"> 
<div id="ccc"> 




$("#bt1,#bt2,#bt3").click(function(){ 
    $("#aaa,#bbb,#ccc").hide(); 
    $(this).next().show(); 
}); 

Answer 4

好了，你可以用data-屬性準備div s到使它更容易。例如：

<div id="aaa" data-btn="bt1">Content #1</div> 
<div id="bbb" data-btn="bt2">Content #2</div> 
<div id="ccc" data-btn="bt3">Content #3</div> 

<button class="content-btn" id="bt1">Show #1</button> 
<button class="content-btn" id="bt2">Show #2</button> 
<button class="content-btn" id="bt3">Show #3</button>​ 

現在只是按照我的意見：

$('button.content-btn').click(function() { 
    // [data-btn^=...] mean "attr data-btn start with..." 
    // First hide all contents 
    var contents = $('div[data-btn^=bt]'); 
    contents.hide(); 

    // Now store the button id clicked 
    var show = $(this).attr('id'); 

    // Now find and show the content that combine with the button id 
    var content = $('div[data-btn=' + show + ']'); 
    content.show(); 
});​ 

可以發現JSFiddle一個活生生的例子。

Answer 5

多帶幾個HTML屬性，你可以做一個單一的點擊功能是這樣的：

<div class="someclass" id="aaa"></div> 
<div class="someclass" id="bbb"></div> 
<div class="someclass" id="ccc"></div> 

<button id="bt1" rel="aaa">show only aaa</button> 
<button id="bt2" rel="bbb">show only bbb</button> 
<button id="bt3" rel="ccc">show only ccc</button> 

的JavaScript：

$('button').click(function(){ 
    $('.someclass').hide(); 
    $('#' + $(this).attr('rel')).show(); 
}); 

（注：太固定的語法錯誤）

您也可以使用HTML 5 data-屬性和jQuery.data來讀取它們，而不是rel。