jQuery를 사용하여 특정 클래스의 대상 이미지를 찾으십니까?

Question

버튼을 클릭하면 my-image 클래스의 첫 번째 이미지에 일부 jQuery (fadeOut)를 적용하고 싶습니다. 내가 다시 그 버튼을 클릭

, 나는 클래스 내 이미지와 이미지의 마크 업에서 다음 발생에 같은 일을하고 싶다.

이미지는 모두 마크 업 전체의 여러 위치에 나타나며 반드시 형제가 아니어도됩니다.

도움 주셔서 감사합니다.

Answer 1

테스트되지 않았지만 표시 및 첫 번째 가짜 선택자를 활용할 수 있습니다.

$('#mybutton').click(function(){ 
    $('.my-image:visible:first').fadeOut(); 
} 

함수는 현재 페이딩이 일치하지 않도록하기 위해 애니메이션 하지 및 을 사용하여 애니메이션을 한 경우 :

$('#mybutton').click(function(){ 
    $('.my-image:visible:not(:animated):first').fadeOut(); 
}) 

필터 방법에 대한 우리의 이해를 수정하려면이 , 나는 단지 긴 손도 시험했다.

$('#mybutton').click(function(){ 
    $('.my-image') 
    .filter(':visible') 
    .not(':animated') 
    .filter(':first') 
    .fadeOut(); 
}) 

이 신속하게 여러 단계를 주석으로 개발 과정에서 특히 유용합니다 :

$('#mybutton').click(function(){ 
    $('.my-image') 
    .filter(':visible') 
// .not(':animated') 
    .filter(':first') 
    .fadeOut(); 
}) 

Answer 2

당신은 두 개의 클래스를 가질 수 있습니다. 하나는 이미 사라져 버렸고 다른 하나는 그렇지 않은 사람들을위한 것입니다. 마찬가지로 :

<img src="" alt="" class="not_faded" /> 

와 jQuery로 지금

<img src="" alt="" class="faded" /> 

는 다음을 수행 할 수 있습니다

$('#mybutton').click (function(){ 
    $('.not_faded:first').fadeOut(); // your fade out effect 
    $('.not_faded:first').attr ('class', 'faded'); 
}); 

이 코드는 not_faded 클래스에 속하는 및 페이드 아웃 이펙트를 만드는 첫 번째 이미지를 가져옵니다 . 그런 다음 이미지의 클래스를 '페이드'로 변경합니다. 그래서 다음에 not_faded 클래스의 첫 번째 이미지가 두 번째 이미지가됩니다.

편집 : Matt의 솔루션을 확인하십시오.보다 세련되고 jQuery를 최대한 활용합니다.