javascript - OOJS 的问题

Question

我在页面上有可变数量的 slider 。每个 slider 都包含可变数量的幻灯片，以及一对上一页/下一页按钮，用于按顺序导航各自的幻灯片。

这是典型 slider 的标记:

<section class="foo">
    <button class="prev"></button>

    <ul class="container slider">
        <li class="slide" id="a01"></li>
        <li class="slide" id="a02"></li>
        <li class="slide" id="a03"></li>
    </ul>

    <button class="next"></button>
</section>

每个 slider 都应该知道它当前显示的幻灯片的索引。这让我相信在页面加载时，我应该循环遍历所有 $('.slider') 元素并为每个元素实例化一个对象。如何编写定义 slider 的类？它应该有一个属性，其中包含当前显示的幻灯片的索引，以及一个根据用户是否单击“下一张”或“上一张”来递增或递减该属性的方法。我已经走到这一步了:

var slider = function () {
    this.pager = 0;
    this.incrementPager = function () {
        console.log(this.pager++);      
    };
};

$(function () {
    $('.prev, .next').click(slider);
});

...但是我的代码没有做太多:)

Answer 1

以下是如何制作 jQuery 插件，我认为这是一种更好的方法，因为您使用的是 jQuery，而 jQuery 并不是真正适用于基于 OO 的类。

$.fn.slider = function() {
    $(this).each(function() {
        var wrapper = $(this);
        var index = 0;
        var listItems = wrapper.find('.slide');
        wrapper.find('.prev').click(function(){
            if (index > 0) {
                $(listItems[index]).removeClass('active');
                index--;
                $(listItems[index]).addClass('active');
            }
        });
        wrapper.find('.next').click(function(){
            if (index < listItems.length - 1) {
                $(listItems[index]).removeClass('active');
                index++;
                $(listItems[index]).addClass('active');
            }
        });

    });
};

你可以像这样使用它

$('section').slider();

工作示例 http://jsfiddle.net/MR8wE/

如果你真的想要一些面向对象的东西，你可以执行以下操作(但我认为这违背了 jQuery 的工作方式)。

/**
 * Adds behavior to the HTML for a slider
 */
function Slider(wrapper) {
    var me = this;
    me.wrapper = $(wrapper);
    me.index = 0;
    me.listItems = wrapper.find('.slide');
    wrapper.find('.prev').click(function(){
        me.prev(); 
    });
    wrapper.find('.next').click(function(){
        me.next();
    });                    
}

Slider.prototype.next = function() {
    this.go(1;)
}
Slider.prototype.previous = function() {
   this.go(-1);
}
Slider.prototype.go = function(steps) {
    var oldIndex = this.index;
    var newIndex =  oldIndex + steps
    if (newIndex >= 0 && newIndex < this.listItems.length ) {
        $(this.listItems[oldIndex]).removeClass('active');
        $(listItems[new]).addClass('active');
        this.index = newIndex;
    }

}

然后你会像这样使用它

var sliders = [];
$('section').each(function(){
     sliders.push(new Slider(this));        
});

// Control the slider without user intervention
sliders[0].next();
sliders[1].go(2);

示例 http://jsfiddle.net/MR8wE/2/