-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。

编辑：您需要将 css 更改为隐藏 #cervene、#zlte 和 #zelene，然后使用 javascript 单独显示和隐藏它们。如果一个元素的父元素具有 display:none，那么使用 javascript 对其进行“显示（）”不会有任何作用，因为您没有从父元素中删除 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>
于 2013-07-17T23:13:17.880 回答