JQuery добавить/удалить класс с помощью «это»

Question

Я пытаюсь добавить класс в DIV, когда его щелчка и удалить при его нажатии второй раз я в настоящее время это имеет свой сценарий -

$(".project").click(function(){ 
     if ($(".project-expand", this).is(':visible')) { 
      $(".project-expand",this).hide(1000); 
      $('.project').delay(1000).queue(function(){ 
      $(".project").removeClass('item-dropped').clearQueue(); 
      }); 
     } else if ($(".project-expand", this).is(':hidden')) { 
      $(".project-expand").hide(1000); 
      $(".project-expand",this).show(1000); 
      $(".project").addClass('item-dropped'); 
     } 
    }); 

Но это добавляет класс «пункт сброшенных» для всех моих див, которые имеют класс «проект», когда я изменить код на -

$(".project", this).addClass('item-dropped'); 

Он не делает ничего, где я буду здесь не так?

Answer 1

Вместо того, чтобы использовать селектор класса $('.project') вы могли бы просто использовать цель события щелчка ($(this)):

$(".project").click(function() { 
    var project = $(this); 
    var projectExpand = $(".project-expand", this); 

    if (projectExpand.is(':visible')) { 
     projectExpand.hide(1000); 
     project.delay(1000).queue(function() { 
      project.removeClass('item-dropped').clearQueue(); 
     }); 
    } else if (projectExpand.is(':hidden')) { 
     $(".project-expand").hide(1000); 
     projectExpand.show(1000); 
     project.addClass('item-dropped'); 
    } 
}); 

Дополнительная информация: Причина того, что вы пытались сделать, не работал изначально является потому что $('.project', this) ищет элементы с классом project внутри текущего элемента (т.е. ищет проект внутри проект)

Answer 2

Вы должны использовать $ (это), чтобы добавить класса на щелкнутом пункте:

 $(".project").click(function(){ 
      if ($(".project-expand", this).is(':visible')) { 
       $(".project-expand",this).hide(1000); 
       $(this).delay(1000).queue(function(){ 
       $(this).removeClass('item-dropped').clearQueue(); // Here 
       }); 
      } else if ($(".project-expand", this).is(':hidden')) { 
       $(".project-expand").hide(1000); 
       $(".project-expand",this).show(1000); 
       $(this).addClass('item-dropped'); // Here 
      } 
     }); 

Answer 3

вы должны использовать:

$(this).addClass('item-dropped'); 

concept fiddle