div內的jQuery div

Question

我試圖用jQuery顯示圖片庫。這是我的代碼：

<script> 
     $("#vsetky").click(function(){ 
    $("#obrazky").show(); 
}); 
     $("#c").click(function(){ 
    $("#cervene").show(); 
}); 
</script> 

<div id="obrazky"> 
    <div id="cervene"> 
    <img src="1.png"> 
    <img src="1.png"> 
    </div> 
    <div id="zlte"> 
    <img src="2.png"> 
    <img src="2.png"> 
    </div> 
    <div id="zelene"> 
    <img src="3.png"> 
    <img src="3.png"> 
    </div> 
</div> 

當#vsetky元素被點擊時...它的工作原理是，每個圖片都顯示出來。 單擊#c元素時，沒有任何圖片。 我試圖用

$("#obrazky > #cervene").show(); 

我嘗試過其他方法，但是沒有什麼工作。請幫助我 - 我做錯了什麼？

Answer 1

你的CSS看起來像什麼？如果#obrazky和#cervene都有display：none，那麼當你點擊#c時，你只會從#cervene中刪除display：none規則，但不是它的父級包裝div＃obrazky。

編輯： 您需要將CSS更改爲隱藏#cervene，#zlte和#zelene，然後使用javascript單獨顯示和隱藏它們。如果一個元素的父元素具有display：none，那麼用show（）來代替它不會造成任何影響，因爲您不會從父元素中移除display：none。

<script> 
    $("#vsetky").click(function(){ 
     $("#cervene, #zlte, #zelene").show(); 
    }); 
    $("#c").click(function(){ 
     $("#cervene").show(); 
    }); 
</script> 

<style> 
    #obrazky {display:inline-block;} 
    #cervene, #zlte, #zelene {display:none;} 
</style> 

<div id="obrazky"> 
    <div id="cervene"> 
     <img src="1.png"> 
     <img src="1.png"> 
    </div> 
    <div id="zlte"> 
     <img src="2.png"> 
     <img src="2.png"> 
    </div> 
    <div id="zelene"> 
     <img src="3.png"> 
     <img src="3.png"> 
    </div> 
</div>