Цикл jQuery - пейджер показывает слайды всех запрошенных сообщений

Я сделал страницу, которая загружает заголовки сообщений в меню, щелкая заголовки, загружает контент, публикуемый в div. Часть содержимого представляет собой div со сценарием цикла jquery. Таким образом, каждая страница имеет свой собственный слайдер с собственными изображениями и собственным пейджером.

Проблема: пейджер показывает кнопки для каждого слайда на странице, даже для тех, которые не отображаются. Например, у меня есть 3 сообщения со слайдером, в сообщении 1 есть 2 изображения в слайдере, в сообщении 2 есть 3 изображения в слайдере, а в сообщении 3 также есть 2 изображения в слайдере. Затем пейджер показывает 7 кнопок на каждом ползунке.

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

// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
    var openMainContent = $(this).attr('rel');

    $('.the-content#'+openMainContent).show(); 
    $('.the-content').not('#'+openMainContent).hide();
    $('.img-slider').cycle('destroy');

    // Image slider
    $('.img-slider')
        .before('<div id="slider-nav" class="slider-nav">') 
        .cycle({ 
            fx:     'fade',
            timeout: 0,
            pager:  '#slider-nav'
    });
});

Как вы думаете, что заставляет это происходить?


wordpress jquery cycle jquery-cycle
person Carlo Ravelli    schedule 15.11.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я бы попробовал инициализировать плагин цикла только на новых. Что-то вроде этого (хотя не проверял):

// We need a way to distinguish navigation wrappers from one another, so we use a counter
var nav_count = 0;
// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
    var openMainContent = $(this).attr('rel');

    $('.the-content#'+openMainContent).show(); 
    $('.the-content').not('#'+openMainContent).hide();

    // Image slider
    $('.img-slider:not(.img-slider-initialized)').each(function(){
        $(this).before('<div id="slider-nav-' + nav_count + '" class="slider-nav">') 
            .cycle({ 
                fx:     'fade',
                timeout: 0,
                pager:  '#slider-nav-' + nav_count
        }).addClass('img-slider-initialized');
        nav_count ++;
    })
});

Можете ли вы проверить это и посмотреть, работает ли это?

person Nikola Ivanov Nikolov    schedule 15.11.2012
comment
Нет, он загружает все кнопки в первом посте, у которого есть слайдер (независимо от того, какую из них вы нажмете первым), а в остальных вообще нет кнопок. Однако по-прежнему загружает класс пейджера в каждое сообщение. - person Carlo Ravelli; 15.11.2012
comment
Я обновил код для просмотра каждого элемента. Можете ли вы попробовать еще раз? - person Nikola Ivanov Nikolov; 15.11.2012
comment
Хорошо, я думаю, что еще одна вещь, которая может быть причиной проблемы, заключается в том, что мы всегда использовали один и тот же идентификатор для оболочки навигации. Я обновил код, чтобы у каждой оболочки был свой идентификатор, поэтому, если это было проблемой, это должно решить проблему. Пожалуйста, попробуйте еще раз :) - person Nikola Ivanov Nikolov; 15.11.2012
comment
Потрясающе, это работает отлично сразу :) Большое спасибо! Я тоже пробовал что-то подобное, используя переменную openMainContent, но, видимо, сделал это неправильно :) - person Carlo Ravelli; 15.11.2012

arrow_upward
0
arrow_downward

Просто предположение: добавляет ли метод .before() закрывающий тег </div> к id="slider-nav"? Это может привести к поломке html.

person banzsh    schedule 15.11.2012
comment
Я тоже думал об этом, но он действительно закрывает его. Кроме того, логика подсказывает мне, что я должен поставить .after('‹/div›'), но это закроет его после img-слайдера, а это не имеет смысла. - person Carlo Ravelli; 15.11.2012