多个开关不能正常工作

Question

我已经实现了一个切换事件，但它无法正常工作。

如果我点击其中一个图像，每个类切换，我只想切换活动类。

<script> 
      $("#img-01").click(function() { 
       $(".crp-list").toggle(); 
      }); 
      $("#img-02").click(function() { 
       $(".crp-list").toggle(); 
      }); 
      $("#img-03").click(function() { 
       $(".crp-list").toggle(); 
      }); 
</script> 

这里是我的html代码..

<div class="toggle-content"> 
     <img src="Images/icon.png" alt="" id="img-01" /> 
      <ul class="crp-list" style="display: none"> 
      <li class="content-one comments hidden"> 
        Content 1 
      </li> 

     </ul> 
    </div> 

<div class="toggle-content"> 
     <img src="Images/icon.png" alt="" id="img-02" /> 
      <ul class="crp-list" style="display: none"> 
      <li class="content-one comments hidden"> 
        Content 3 
      </li> 

     </ul> 
    </div> 

<div class="toggle-content"> 
     <img src="Images/icon.png" alt="" id="img-03" /> 
      <ul class="crp-list" style="display: none"> 
      <li class="content-one comments hidden"> 
        Content 3 
      </li> 

     </ul> 
    </div> 
</html> 

Answer 1

您可以使用attrribute starts with选择缩短你的代码以及使用$(this)和.next()只瞄准未来点击图片即时兄弟，即.crp-list列表：

$('[id^="img-"]').click(function() { 
    $(this).next().toggle(); 
}); 

Answer 2

您需要使用

$(this).next(".crp-list").toggle(); 

，而不是

$(".crp-list").toggle(); 

而且你的代码进行优化，以

$("#img-01, #img-02, #img-03").click(function() { 
    $(this).next(".crp-list").toggle(); 
}); 

不过，我会推荐给一个普通类图像，然后使用类选择器来绑定事件。像

HTML

<img class="image" src="Images/icon.png" alt="" id="img-01" /> 
<img class="image" src="Images/icon.png" alt="" id="img-02" /> 
<img class="image" src="Images/icon.png" alt="" id="img-03" /> 

JS

$(".image").click(function() { 
    $(this).next(".crp-list").toggle(); 
}); 

Answer 3

$("#img-01, #img-02, #img-03").click(function() { 
    $(this).next(".crp-list").toggle(); 
}); 

Answer 4

$(".toggle-content img").click(function() { 
    $(this).next('ul').toggle(); 
}); 

现在，您可以通过一行代码