Question

我需要在这个有序列表的每个div上绑定click函数，以便在每个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对象。代替，它允许我们测试一个的内容 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);
    }
});

在每个div JQuery上绑定click函数

5 个答案: