jQuery cycle-Pager显示所有查询的帖子'；幻灯片

我制作了一个在菜单中加载文章标题的页面，单击标题将内容加载到一个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'
    });
}); 

//显示所选类别的内容
$（'ul.cats li.trigger'）。单击（函数（）{
var openMainContent=$（this.attr（'rel'）；
$（'.content#'+openMainContent.show（）；
$（'.the content'）。而不是（'#'+openMainContent.hide（）；
$（'.img滑块'）。循环（'destroy'）；
//图像滑块
$（'.img滑块'）
.之前（“”）
.循环（{
外汇：“淡出”，
超时：0，
寻呼机：“#滑块导航”
});
}); 

---

你认为这是什么造成的

我会尝试只在新插件上初始化cycle插件。类似这样的内容（但尚未测试）：

//我们需要一种方法来区分导航包装器和其他包装器，所以我们使用了一个计数器
var nav_计数=0；
//显示所选类别的内容
$（'ul.cats li.trigger'）。单击（函数（）{
var openMainContent=$（this.attr（'rel'）；
$（'.content#'+openMainContent.show（）；
$（'.the content'）。而不是（'#'+openMainContent.hide（）；
//图像滑块
$（'.img滑块：未初始化（.img滑块）'）。每个（函数（）{
$（此）。在（“”）之前
.循环（{
外汇：“淡出”，
超时：0，
寻呼机：'#滑块导航-'+导航计数
}).addClass（'img-slider-initialized'）；
导航计数++；
})
});

---

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

我会尝试只在新插件上初始化cycle插件。类似这样的内容（但尚未测试）：

//我们需要一种方法来区分导航包装器和其他包装器，所以我们使用了一个计数器
var nav_计数=0；
//显示所选类别的内容
$（'ul.cats li.trigger'）。单击（函数（）{
var openMainContent=$（this.attr（'rel'）；
$（'.content#'+openMainContent.show（）；
$（'.the content'）。而不是（'#'+openMainContent.hide（）；
//图像滑块
$（'.img滑块：未初始化（.img滑块）'）。每个（函数（）{
$（此）。在（“”）之前
.循环（{
外汇：“淡出”，
超时：0，
寻呼机：'#滑块导航-'+导航计数
}).addClass（'img-slider-initialized'）；
导航计数++；
})
});

---

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

只是猜测：是否执行

.before（）

方法将关闭

标记添加到

id=“slider nav”

？它可能会导致html被破坏。

只是猜测：是否执行

.before（）

方法将结束标记添加到

id=“slider nav”

？它可能会导致html被破坏。

不，它会加载第一篇文章中有滑块的所有按钮（无论您先单击哪个），而其他按钮则根本没有按钮。但仍然会将pager类加载到每篇文章中。我已经更新了代码以遍历每个元素-您可以再试一次吗？好的，我认为另一个可能导致问题的原因是我们总是使用相同的id作为导航包装器。我更新了代码，使每个包装都有一个不同的id，因此，如果这是问题所在，这应该可以解决问题。请再试一次：）太棒了，马上就可以用了：）非常感谢！我使用openMainContent变量也尝试过类似的方法，但显然没有正确的方法：）不，它会在第一篇文章中加载所有带有滑块的按钮（无论您先单击哪个），而其他的则根本没有按钮。但仍然会将pager类加载到每篇文章中。我已经更新了代码以遍历每个元素-您可以再试一次吗？好的，我认为另一个可能导致问题的原因是我们总是使用相同的id作为导航包装器。我更新了代码，使每个包装都有一个不同的id，因此，如果这是问题所在，这应该可以解决问题。请再试一次：）太棒了，马上就可以用了：）非常感谢！我使用openMainContent变量也尝试过类似的方法，但显然没有正确的方法：）我也在想，但它确实关闭了它。除此之外，逻辑告诉我应该把。放在（“”）之后，但这会在img滑块之后关闭它，这没有意义。我也在想，但它确实关闭了它。除此之外，逻辑告诉我应该在（''）之后放上。

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