Функция привязки кликов на каждом элементе JQuery

Question

Мне нужно привязать функцию щелчка к каждому div этого упорядоченного списка, чтобы скрыть / показать изображение на каждом div imgXX, я новичок в 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/

Таким образом, вы не можете использовать длину наэто как он возвращает логическое значение.Удалите «length», и оно должно работать.

Answer 4

Не уверен насчет вложенности элементов div, но поскольку вы запрашиваете только затухание img, я предполагаю, что раздел .star видим и доступен для нажатия Функция ниже немного более эффективна, так как я использую children вместо find, который является рекурсивным. Кроме селекторов это должно работать для вас.

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

Answer 5

Не думаю, что вы обязательно нуждаетесь в каждом.

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

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

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

});