Question

我正在使用wordpress来遍历我的帖子并从每个帖子返回5张图片。然后我将这5张图片加载到滑块中。我循环浏览10页，在一页上总共返回10个滑块。潜在地，网站的管理员可以创建无限量的帖子（项目组合项目），产生无限量的滑块（每页10个，分页）。

许多jquery滑块插件允许在一个页面上使用多个滑块，但它们都需要您使用唯一选择器调用它们。例如，前5个滑块将被调用如下：

 $("#portfolio-slider-1").bxSlider();
 $("#portfolio-slider-2").bxSlider();
 $("#portfolio-slider-3").bxSlider();
 $("#portfolio-slider-4").bxSlider();
 $("#portfolio-slider-5").bxSlider();

如果我有300个滑块，那么就会有300个电话......现在看起来没有必要吗？特别是wordpress有一个通用的header / footer.php - 它会在每个页面上进行这些调用（甚至是没有这些滑块容器的页面）。完全没必要。

另一个问题是使用唯一ID分配wordpress的动态生成的帖子（项目组合项）。因为wordpress在帖子中循环，所以它不能给每个帖子一个div ID为1，然后是2，然后是3，依此类推。 Wordpress会为每个帖子提供一个.portfolio-slider类，它不适用于jquery滑块插件。

那似乎并不合适。但话说回来，我想不出一个很好的解决方案，允许在一个页面上有许多滑块，并带有一个共同的类名。我试过这么多的插件，它只是不起作用。它们都需要唯一的ID！所以我想我的问题是，如何在一个允许动态生成项目的页面上添加许多图像滑块（必须是类名，而不是ID）？

Answer 1

您应该可以使用以下方法压缩多个.bxSlider（）调用：

$('[id^="portfolio-slider-"]').each(function(){
    $(this).bxSlider();
});

这基本上转换为：对于每个具有以“portfolio-slider-”开头的id的元素，在其上调用.bxSlider（）。

要改为使用.portfolio-slider类，并将.bxSlider（）分别应用于每个类：

$('.portfolio-slider').each(function(){
    $(this).bxSlider();
});

这里的关键是使用每个元素，因此该函数分别应用于每个元素而不是所有元素的集合。

使用php循环创建的一个页面上的多个图像滑块

1 个答案: