Question

我制作了一个页面，在菜单中加载帖子标题，点击标题加载，将内容发布到div中。部分内容是带有jquery循环脚本的div。因此，每个页面都有自己的滑块，它有自己的图像，也有自己的寻呼机。

问题：寻呼机显示页面上每张幻灯片的按钮，即使是那些未显示的按钮。例如，我有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'
    });
});

您认为这会发生什么？

Answer 1

我会尝试仅在新的插件上初始化循环插件。像这样的东西（虽然没有测试过）：

// 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 ++;
    })
});

你能测试一下，看看它是否有效吗？

Answer 2

只是一个猜测： .before()方法会将结束</div>标记添加到id="slider-nav"吗？它可能会导致html损坏。

jQuery循环 - 寻呼机显示所有查询的帖子的幻灯片

2 个答案: