-1

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

他の方法を試しましたが、何も機能していません。助けてください - 私は何が間違っていますか?

4

1 に答える 1

0

あなたのCSSはどのように見えますか？#obrazky と #cervene の両方に display:none がある場合、#c をクリックすると #cervene から display:none ルールが削除されるだけで、div#obrazky をラップする親ではありません。

編集: #cervene、#zlte、および #zelene を非表示にするように css を変更し、javascript を使用してそれらを個別に表示および非表示にする必要があります。要素の親に display:none がある場合、親から display:none を削除していないため、javascript でそれを「show()」しても何も起こりません。

<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>
于 2013-07-17T23:13:17.880 に答える