jquery - Wordpress 中的 Flexslider：多个计数器

Question

我试图弄清楚如何让多个计数器正常工作。flexslider 的功能方式是，每个幻灯片可以有许多幻灯片和导航，但我不能让计数器只为单个幻灯片工作。

这是一个例子：http: //jsfiddle.net/thehonestape/3Cgcs/1/

我才真正开始使用 jquery，所以我确信答案很简单，但我自己无法弄清楚。谢谢您的帮助。

安倍

Answer 1

您通过此代码设置值

$('.current-slide').text()

这将使用 .current-slide 类更新所有元素的文本。您为两个计数器提供了相同的类，这就是它们显示相同值的原因。

Answer 2

你无法以你正在处理的方式解决问题。jQuery 将选择所有具有 class=".current-slide" 的元素。解决您的问题的唯一方法是重新考虑您的设计，即为什么您在同一页面上有多个滑块？也许您可以将所有图像合并到一个滑块中，或者更改您的内容，以便每页有一个滑块。例如，只需有一个链接 () 到下一个主题的下一个滑块。或者，如果滑块需要保持在同一页面上，则只需创建多个 Flexislider 调用：

$('.flexslider').flexslider({
//options
start: function(slider){
    $('.total-slides').text(slider.count);
    $('.current-slide').text(slider.currentSlide);
    $('.current-slide').text(function(i,txt) { return parseInt(txt, 10) + 1; });

  },
  after: function(slider) {
    $('.current-slide').text(slider.currentSlide);
    $('.current-slide').text(function(i,txt) { return parseInt(txt, 10) + 1; });

  }

 });

 $('.flexslider2').flexslider({
//options
 start: function(slider){
    $('.total-slides2').text(slider.count);
    $('.current-slide2').text(slider.currentSlide);
    $('.current-slide2').text(function(i,txt) { return parseInt(txt, 10) + 1; });

  },
  after: function(slider) {
    $('.current-slide2').text(slider.currentSlide);
    $('.current-slide2').text(function(i,txt) { return parseInt(txt, 10) + 1; });

  }

 });