jquery - BX slider 。在以前的幻灯片中添加和删除类

Question

我正在尝试为当前幻灯片之前的每个幻灯片导航元素符号添加一个类。

现在，如果您单击下一步按钮，它会添加一个类。但是我不知道如何在单击上一个按钮时删除该类。

类似的东西

$(document).ready(function($) {

    slider = $('.slider').bxSlider({

    onSlideBefore: function(){

     var current = slider.getCurrentSlide();
      if (slide-data-index <= current) {
        $('.bx-pager .bx-pager-item a').addClass('past');
      } else {
        $('.bx-pager .bx-pager-item a').removeClass('past');
    }
});

这是我目前所做的工作:http://jsfiddle.net/mreee/xVnQY/

我不知道为幻灯片分配一个变量

Answer 1

我不明白的一件事是为什么你的 CSS、HTML 和 jQuery 彼此不一致。您在 CSS 和 jQuery 中引用的类或元素在 HTML 中无处可寻。我只是猜测您没有粘贴完整的 HTML。

无论如何，我检查了你的代码并为你发布了一个更简单易懂的解决方案。我没有对 HTML/CSS 进行任何更改，所以我将只粘贴 jQuery。此外，我在 fiddle 的外部引用了 bxslider JS 文件，您可以在左侧 Pane 中看到它。

这是对外部 bxslider 文件的引用。

http://bxslider.com/lib/jquery.bxslider.min.js

jQuery

jQuery(document).ready(function () {
    $('.slider').bxSlider({
        mode: 'horizontal',
        speed: 500,
        pager: true,
        controls: true,
        auto: false,
        infiniteLoop: false,
        hideControlOnEnd: true,
        onSlideNext: function () {
            $('.slider h3').addClass('blueylooey');
        },
        onSlidePrev: function () {
            $('.slider h3').removeClass('blueylooey');
        }  
    });

});

这是一个Working Demo