Question

我是jquery的新手，我真的需要帮助。我有4个div，每个div中有4个图像。我用切换来显示和隐藏图像。我需要减小代码的大小，可能需要使用＆＃34;这＆＃34;。我试图使用它，但是工作。这是我的代码：

<head>
    <script>
    $(document).ready(function() {
      var par = $("#11");
      $(par).hide();
        $("#one").click(function(e) {
          $(par).toggle();
          e.preventDefault();
      });
      var para = $("#12");
      $(para).hide();
        $("#two").click(function(e) {
          $(para).toggle();
          e.preventDefault();
      });
      var parb = $("#21");
      $(parb).hide();
        $("#three").click(function(e) {
          $(parb).toggle();
          e.preventDefault();
      });
      var parc = $("#22");
      $(parc).hide();
        $("#four").click(function(e) {
          $(parc).toggle();
          e.preventDefault();
      });
    });
    </script>
</head>
<body>
   <div class="outline">
     <div id="one">
         <a href="#"><img id="11" src="1.png"></a>
     </div>
     <div id="two">
         <img  id ="12" src="2.png">
     </div>
     <div style="clear:both;"></div>
     <div id="three">
         <img id="21" src="2.png">
     </div>
     <div id="four" >
         <img id="22" src="1.png">
     </div>
     <div style="clear:both;"></div>
  </div>

Answer 1

你真的需要区分每一张图片吗？如果不是，那就是一个简单的解决方案

$(document).ready(function() {
    $('.outline').find('img').each(function() {
        $(this).hide();
        $(this).click(function(e) {
            e.preventDefault();
            $(this).toggle();
        }
    }
}

首先，您需要选择.outline div中的每个img。然后为每个人绑定onClick事件。我可能错了，但认为e.preventDefault（）应该是onClick事件中的第一件事（如果你需要阻止正常事件）。

Answer 2

我设法做了些什么。我也使用了一些CSS来帮助你，但它并不是必需的。

我不明白你是否需要区分div中的图像，所以请告诉我它是否有用。

JSFiddle here。

$(document).ready(function() {
    $(".outline div").click(function() {
        $('img',this).toggle();
    }); 
});

Answer 3

您可以先选择所有img个元素，然后选择hide个元素。然后向上导航到父div并附加click事件监听器，该监听器将切换包含的img元素。

$(document).ready(function() {
    $('.outline img').hide().closest('div').click(function(e) {
        e.preventDefault();
        $('img',this).toggle();
    });
});

Concept Verification

如何使用jquery访问div onclick中包含的特定图像的id

3 个答案: