jQuery隱藏嵌套的div

-2

我有3個級別的div。當我從動作div中選擇按鈕時，應該顯示一些選項（重要的：隱藏最後顯示的選項（和類別）），當我點擊一些選項按鈕，顯示類別。？如何使它看起來乾淨多了，而不是寫的onclick屬性中的所有變化（這只是例子，我有更大的例子在這裏 - 許多選擇，而且很多類別各選項）jQuery隱藏嵌套的div

<div id="action"> 
    <p:commandButton onclick="$('#option1').show(); "$('#option2').hide();"/> 
    <p:commandButton onclick="$('#option1').hide(); "$('#option2').show();"/> 
</div> 

<div id="option1" style="display:none"> 
    <p:commandButton onclick="...?"/> 
    <p:commandButton onclick="...?"/> 
</div> 

<div id="option2" style="display:none"> 
    <p:commandButton onclick="...?"/> 
    <p:commandButton onclick="...?"/> 
</div> 

<div id="option1category1" style="display:none"> 
    <p:commandButton /> 
</div> 
<div id="option1category2" style="display:none"> 
    <p:commandButton /> 
</div> 
<div id="option2category1" style="display:none"> 
    <p:commandButton /> 
</div>

來源

2014-02-24 user2771738

分配類的按鈕，並使用$（「按鈕級」）。切換（）？ – Tessmore

但是，爲什麼？ toogle ll會展示應該隱藏的元素。我總是可以使用$（「。category」）。hide（）並只顯示一個需要$（「＃option1category1」）。show（）但它有點跛腳？ – user2771738

按鈕元素都是錯的！例如，它不存在元素，您應該將其編寫爲

有你的標記中有很多錯誤。 button標籤與img標籤的用途不同。按鈕標籤有一個開始和結束元素。

此外，您的div需要用</div>標籤關閉，以代替<div>。

我畫出了您可能正在尋找的一些基本功能。

$('#button1').click(function(){  
    $('div[id^="option"]').hide(); 
    $('#option1').show(); 
}); 

$('#button2').click(function(){ 
    $('div[id^="option"]').hide(); 
    $('#option2').show(); 
});

此代碼隱藏所有使用選項啓動ID的div，然後顯示其中之一。

檢查小提琴的完整標記。

http://jsfiddle.net/ef4ux/

來源

2014-02-24 09:43:24 timo

我修復了所有錯誤。關於解決方案，我有超過50個按鈕。我正在尋找一些更好的解決方案，而不是爲每個按鈕創建點擊功能。 – user2771738

@ user2771738然後，您需要像Arun P建議的那樣使用數據目標等標識符。 – timo

是的，現在只剩下有一些primefaces按鈕的屬性了:) – user2771738

jQuery隱藏嵌套的div

回答

相關問題