为每个div绑定点击功能JQuery

Question

我需要在此有序列表的每个 div 上绑定单击功能，以便在每个 imgXX div 上隐藏/显示图像，我是 JQuery

<ol id='selectable'>
 <li class="ui-state-default">
   <div id="img01" class="img">
      <div id="star01" class="star">
          <img src="../ima/star.png" height="30px"/>
      </div>
   </div>
 </li>
 <li class="ui-state-default">
   <div id="img02" class="img">
      <div id="star02" class="star">
          <img src="../ima/star.png" height="30px"/>
      </div>
   </div>
 </li>
</ol>

JQuery的新手

$('div').each(function(){
   $(this).click(function(){
          if($(this).find('img').is(':visible').length){
                    $(this).find('img').fadeOut(700);
          }
          else{
                    $(this).find('img').fadeIn(700);
              }
   });
});

Answer 1

试试这个：

$('div').each(function(){ 
   $(this).click(function(){ 
          if($(this).find('img').is(':visible')){ 
                    $(this).find('img').fadeOut(700); 
          } 
          else{ 
                    $(this).find('img').fadeIn(700); 
              } 
   }); 
}); 

Answer 2

is 方法返回一个布尔值。使用：

if($(this).find('img').is(':visible'))

或：

if($(this).find('img:visible').length)

Answer 3

与其他过滤和
遍历方法，.is() 没有
创建一个新的 jQuery 对象。反而，
它允许我们测试 a 的内容
未经修改的 jQuery 对象。

• 来源： http://api.jquery.com/is/

所以，你不能使用长度因为它返回一个布尔值。删除“长度”，它应该可以工作。

Answer 4

我认为你不一定需要每一个。

$('div').click(function(){

  var img = $(this).find('img');

  if($(img).is(':visible')){
    $(img).fadeOut(700);
  }

});

Answer 5

不确定 div 的嵌套，但由于您请求仅淡入 img 我假设 .star div 是可见且可点击的。下面的函数效率更高一些，因为我使用的是 children 而不是递归的 find 。除了选择器之外，这应该适合您。

$('div.star').click(function() {
    function () {
        $(this).children('img').fadeOut(700);
    },
    function () {
        $(this).children('img').fadeIn(700);
    }
});