целевые изображения с определенным классом с JQuery?

Question

Когда я нажимаю кнопку, я хочу применить jQuery (скажем, fadeOut ) к первому изображению с классом my-image .

Когда я снова нажимаю эту кнопку, я хочу сделать то же самое для вхождения next в разметке изображения с классом my-image .

Все изображения появляются в разных местах по всей разметке и не обязательно являются братьями и сестрами.

Спасибо за любую помощь.

Answer 1

Хотя и не тестировалось, вы можете воспользоваться visible и first psuedo-селекторами.

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

Если ваша функция является анимацией, используйте , а не и анимированные , чтобы убедиться, что вы не соответствует той, которая в настоящее время исчезает:

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

Чтобы улучшить наше понимание метода filter , я только что проверил длинную руку.

$('#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" />

и

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

Теперь с jQuery вы можете делать следующее:

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

Этот код получает первое изображение, которое принадлежит классу not_faded, и создает эффект затухания. Затем изменяет класс этого изображения на «исчез». Так что первое изображение класса not_faded в следующий раз будет вторым.

Редактировать: посмотрите решение Мэтта, оно более элегантное и в полной мере использует jQuery.