Блог

Я все еще новичок в jQuery, и у меня есть этот простой код слайд-шоу / галереи, который отлично работает, который я использовал в нескольких веб-проектах:

 function f_slideShow(){
    var v_fadeTime = 600;
    var v_active = $("#divPFpics IMG.active");
    var v_next =  v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");

    if (v_active.length == 0) 
        {
            v_active = $("#divPFpics IMG:last");
            v_active.addClass("last-active");
        }

    v_next.css({opacity: 0.0})
        .addClass("active")
        .animate({opacity:1.0}, v_fadeTime, function() {
            v_active.removeClass("active last-active");
    });
}
  

В моем текущем проекте используется длинный список изображений, которые классифицированы по классам CSS. Как и сейчас, это слайд-шоу циклически перебирает ВСЕ мои изображения.

Мой вопрос: как и куда мне поместить метод .filter(), чтобы этот код циклически просматривал ТОЛЬКО изображения, содержащие выбранный класс CSS? Я заставил все остальное работать в галерее, и это меня убивает, поэтому я, наконец, перехожу к Stackoverflow. Спасибо всем!

 var v_active = $("#divPFpics IMG.active");
var v_next =  v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");
  

Эти строки имеют решающее значение, они создают список, по которому будет циклически проходить ваше слайд-шоу.

Хотя это не показано, я полагаю, что ваша функция вызывается каждые x секунд.

v_active отображается ли изображение в данный момент.

v_next является ли изображение следующим за ним в DOM.

Вы могли бы сделать это таким образом :

 var v_active = $("#divPFpics IMG.active");
var v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");
while (!v_next.hasClass('yourClassName')) {
  v_next = v_active.next().length ? v_active.next() : $("#divPFpics IMG:first");
} 
  

Однако я бы посоветовал вам не использовать это решение подобным образом: если ни у одного из ваших img нет требуемого класса, вы будете выполнять цикл бесконечно.

Если вы действительно хотите использовать .фильтруйте, вам придется переписать эти строки. Это связано с тем, как выбирается следующее изображение. Вам нужно будет найти способ сохранить положение текущего активного изображения, выбрать свой набор изображений ( $('divPFpics').filter(...) ) и выбрать следующий.