jQuery для цикла работает не так, как ожидалось

#jquery

Вопрос:

Я работаю над плагином и в настоящее время хочу обеспечить динамическое поведение моей галереи isotope. Проблема странная, поскольку весь код в порядке, но не работает. Это работает только для одной последней галереи, пока я хочу, чтобы каждая галерея работала нормально.

Сценарий такой: на одной странице может быть несколько галерей, и я просто добавляю цифру к каждой галерее, чтобы присвоить ей уникальный идентификатор, а затем я также могу обновить свой jquery.

Вот мой код jQuery.

 var count = jQuery('div[filter-id="filter-count"]').length;
alert(count);
for (var i = 0; i < count; i  ) {
    alert(i);
    if (jQuery('#gallery-listed'  i  '').length) {
            var $container = jQuery('#gallery-listed'  i  '');
            $container.imagesLoaded( function(){
                $container.isotope({
                    filter: '*',
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false
                    }
                });
            });
            jQuery('#filterlist_v5'  i  ' a').click(function() {
                jQuery('#filterlist_v5'  i  ' .current').removeClass('current');
                jQuery(this).addClass('current');

                var selector = jQuery(this).attr('data-filter');
                $container.isotope({
                    filter: selector,
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false
                    }
                });
                return false;
            });
        }
}

Я подсчитываю свои данные attr, чтобы убедиться, сколько там галерей, а затем также выполняю цикл. Html-код выглядит нормально, и то же самое относится к jquery, хотя я чувствую, что jquery не печатает этот код, поскольку он показывает тот же код в моем скрипте, как только я проверяю скрипты нижнего колонтитула. Надеюсь, я смогу помочь вам понять мою проблему.

1. Было бы полезно, если бы вы предоставили свой html, а также указали, какая консоль браузера или предупреждение отображаются при запуске выше.

2. хорошо, позвольте мне также добавить свой html

3. html такой же, как код jquery … он также отлично предупреждает обо всем… но как только я нажимаю на кнопку фильтра первой галереи, она перетасовывает фильтры последней галереи, в то время как я хочу, чтобы она работала сама по себе: (

4. этот код отлично работает в моем php-файле… но я хочу, чтобы это работало из моего файла scripts, потому что это более профессиональный подход… но в чем проблема с папкой scripts во время ее работы в файле php???

Ответ №1:

Вместо этого вы можете добавить класс в свой код и использовать каждую функцию jQuery, как показано ниже:

Примечание: предположим, что имя вашего класса «testing», тогда код будет выглядеть так, как показано ниже:

 $(".testing").each(function(){
var i = 0;
if (jQuery('#gallery-listed'  i  '').length) {
        var $container = jQuery('#gallery-listed'  i  '');
        $container.imagesLoaded( function(){
            $container.isotope({
                filter: '*',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
        });
        jQuery('#filterlist_v5'  i  ' a').click(function() {
            jQuery('#filterlist_v5'  i  ' .current').removeClass('current');
            jQuery(this).addClass('current');

            var selector = jQuery(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });
    } 
i = i   1;
});

Надеюсь, у вас сейчас все работает нормально: просто сосредоточьтесь на этих двух строках ниже:

 var i = 0;

 i = i  1;

который устанавливает i в 0 и увеличивает значение is на 1 после каждой итерации. Итак, это будет выполняться, давайте предположим, что у вас есть 5 классов тестирования, затем 5 раз, и вы получите свои результаты.