jQuery Events仅适用于最后一个元素

Question

这有点棘手。我正在构建一个Carousel视图，它在加载时使用jQuery连接起来。

这是标记：

<div class="carousel" data-direction="v" id="carousel1">
    <div class="card-cont">
        <div id="card1" class="card">This is Card 1</div>
        <div id="card2" class="card">This is Card 2</div>
        <div id="card3" class="card">This is Card 3</div>
        <div id="card4" class="card">This is Card 4</div>
    </div>
</div>

<div class="carousel" data-direction="h" id="carousel2">
    <div class="card-cont">
        <div id="card5" class="card">This is Card 1</div>
        <div id="card6" class="card">This is Card 2</div>
        <div id="card7" class="card">This is Card 3</div>
        <div id="card8" class="card">This is Card 4</div>
    </div>
</div>

使用jQuery，我遍历所有.carousel元素并连接功能。代码是面向对象的，我在这里发布了一些jsFiddle＆gt; http://jsfiddle.net/eZbUB/

问题在于，每当我在页面上有多个轮播时，事件（即更换卡片）仅应用于页面上的最后轮播。有没有人有办法解决吗？指示器和尺寸等的定位功能都可以正常工作。这是完整的jQuery代码：

$(function(){
    $('.carousel').each(function() { Carousel.init($(this)); });
});

var Carousel = {

    container       : null,
    card_container  : null,
    cards           : [ ],
    card_width      : 0,
    no_cards        : 0,
    indicator       : { },
    current_card    : 0,
    direction       : 'h',

    init : function(container) {

        // Assin vars:
        var self             = this;
        this.container       = container;
        this.card_container  = this.container.find('.card-cont');
        this.cards           = this.container.find('div.card');
        this.card_width      = this.container.width();
        this.no_cards        = this.cards.length;
        this.direction       = $(this.container).attr('data-direction');

        // Size the container:
        this.card_container.width((this.card_width * this.no_cards))

        // Add an indicator:
        this.indicator = $('<ul class="card-indicator" />');
        this.indicator.items = [ ];

        if(this.direction == 'v') { this.indicator.addClass('vertical'); }

        for(var i = 0; i < this.no_cards; i++)
        {
            $(this.cards[i]).width(this.card_width);
            var indicator_item = $('<li />');
            indicator_item.click(function() { self.setCard($(this).index()); });
            this.indicator.append(indicator_item);
            this.indicator.items.push(indicator_item);

        }
        this.indicator.appendTo(this.container);

        // Position the indicator:
        if(this.direction == 'h')
        {
            var indicator_top_pos = ((this.container.offset().top + this.container.height()) - this.indicator.height());
            var indicator_left_pos = (this.container.width() - this.indicator.width()) / 2;
            this.indicator.css({ top: indicator_top_pos, left: indicator_left_pos });
        }
        else
        {
            var indicator_top_pos = (this.container.height() - this.indicator.height()) / 2;
            var indicator_left_pos = (this.container.offset().left + this.container.width()) - 20;
            this.indicator.css({ top: indicator_top_pos, left: indicator_left_pos });
        }

        // Add the current styles to everything:
        $(this.cards[0]).addClass('current');
        this.indicator.items[0].addClass('current');

        // Hook up the drag events:
        var mouse_start_x = 0;
        var mouse_end_x   = 0;
        var mouse_start_y = 0;
        var mouse_end_y   = 0;
        var direction_x   = null;
        var direction_y   = null;
        var next_index    = 0;

        this.container.mousedown(function(e) {
            mouse_start_x = e.pageX;
            mouse_start_y = e.pageY;
        });
        this.container.mouseup(function(e) {
            mouse_end_x = e.pageX;
            mouse_end_y = e.pageY;

            alert(self.container.attr('id'));

            if(mouse_end_x > mouse_start_x) { direction_x = 'right'; }
            if(mouse_end_x < mouse_start_x) { direction_x = 'left'; }
            if(mouse_end_y > mouse_start_y) { direction_y = 'down'; }
            if(mouse_end_y < mouse_start_y) { direction_y = 'up'; }

            switch(self.direction)
            {
                case 'v':
                    if(direction_y == 'down') { next_index = (self.current_card == 0) ? 0 : self.current_card - 1; }
                    if(direction_y == 'up')   { next_index = (self.current_card == (self.no_cards - 1)) ? self.current_card : self.current_card + 1; }
                    break;

                case 'h':
                default:
                    if(direction_x == 'right') { next_index = (self.current_card == (self.no_cards - 1)) ? self.current_card : self.current_card + 1; }
                    if(direction_x == 'left')  { next_index = (self.current_card == 0) ? 0 : self.current_card - 1; }
                    break;
            }
            self.setCard(next_index);
        });

        // Return the object (we use init as a constructor):
        return this;
    },

    // Function to check if we're on the last card:
    onLastCard : function() {
        return (this.current_card == (this.indicator.items.length - 1)) ? true : false;
    },

    // Function to check if we're on the first card:
    onFirstCard : function() {
        return (this.current_card == 0) ? true : false;
    },

    setCard : function(index) {
        // If the index matches the current one, don't do anything:
        if(index == this.current_card)
        {
            return;
        }
        else
        {
            // Calculate the left position we need to move:
            var new_left_pos = this.card_width * index;
            this.card_container.css({ left: -new_left_pos });
            this.indicator.items[this.current_card].removeClass('current');
            this.indicator.items[index].addClass('current');
            this.current_card = index;
            return true;
        }
    },
};

我尝试了其他替代方案（例如bind()和live()，但两者都没有效果）。最感激的任何帮助。

Answer 1

您在Carousel.init函数init内呼叫this的方式始终为Carousel - 也就是说，只有一个。这就是为什么你只看到它被应用到最后一个。

我会将Carousel重新设置为构造函数（与new一起使用的那种）。 @Boo刚刚在new前面抛出一个Carousel.init，这是一个好的开始，但是正在创建的对象将没有你放在Carousel上的各种属性。 / p>

这是一个快速的改造;它完全未经测试，但应该带你朝着正确的方向前进：

// Scoping function so our various member functions can have proper names
var Carousel = (function() {

    // The constructor function    
    function Carousel() {
        // Assign vars:
        var self             = this; // Important for the event handler closures

        this.container       = container;
        this.card_container  = this.container.find('.card-cont');
        this.cards           = this.container.find('div.card');
        this.card_width      = this.container.width();
        this.no_cards        = this.cards.length;
        this.direction       = $(this.container).attr('data-direction');

        // Size the container:
        this.card_container.width((this.card_width * this.no_cards))

        // Add an indicator:
        this.indicator = $('<ul class="card-indicator" />');
        this.indicator.items = [ ];

        if(this.direction == 'v') { this.indicator.addClass('vertical'); }

        for(var i = 0; i < this.no_cards; i++)
        {
            $(this.cards[i]).width(this.card_width);
            var indicator_item = $('<li />');
            indicator_item.click(function() { self.setCard($(this).index()); });
            this.indicator.append(indicator_item);
            this.indicator.items.push(indicator_item);

        }
        this.indicator.appendTo(this.container);

        // Position the indicator:
        if(this.direction == 'h')
        {
            var indicator_top_pos = ((this.container.offset().top + this.container.height()) - this.indicator.height());
            var indicator_left_pos = (this.container.width() - this.indicator.width()) / 2;
            this.indicator.css({ top: indicator_top_pos, left: indicator_left_pos });
        }
        else
        {
            var indicator_top_pos = (this.container.height() - this.indicator.height()) / 2;
            var indicator_left_pos = (this.container.offset().left + this.container.width()) - 20;
            this.indicator.css({ top: indicator_top_pos, left: indicator_left_pos });
        }

        // Add the current styles to everything:
        $(this.cards[0]).addClass('current');
        this.indicator.items[0].addClass('current');

        // Hook up the drag events:
        var mouse_start_x = 0;
        var mouse_end_x   = 0;
        var mouse_start_y = 0;
        var mouse_end_y   = 0;
        var direction_x   = null;
        var direction_y   = null;
        var next_index    = 0;

        this.container.mousedown(function(e) {
            mouse_start_x = e.pageX;
            mouse_start_y = e.pageY;
        });
        this.container.mouseup(function(e) {
            mouse_end_x = e.pageX;
            mouse_end_y = e.pageY;

            alert(self.container.attr('id'));

            if(mouse_end_x > mouse_start_x) { direction_x = 'right'; }
            if(mouse_end_x < mouse_start_x) { direction_x = 'left'; }
            if(mouse_end_y > mouse_start_y) { direction_y = 'down'; }
            if(mouse_end_y < mouse_start_y) { direction_y = 'up'; }

            switch(self.direction)
            {
                case 'v':
                    if(direction_y == 'down') { next_index = (self.current_card == 0) ? 0 : self.current_card - 1; }
                    if(direction_y == 'up')   { next_index = (self.current_card == (self.no_cards - 1)) ? self.current_card : self.current_card + 1; }
                    break;

                case 'h':
                default:
                    if(direction_x == 'right') { next_index = (self.current_card == (self.no_cards - 1)) ? self.current_card : self.current_card + 1; }
                    if(direction_x == 'left')  { next_index = (self.current_card == 0) ? 0 : self.current_card - 1; }
                    break;
            }
            self.setCard(next_index);
        });

        // No need to return `this`, that's what constructor functions do by default
    }

    // Our various member functions, we'll assign them to the prototype below

    // Function to check if we're on the last card:
    function Carousel$onLastCard() {
        return (this.current_card == (this.indicator.items.length - 1)) ? true : false;
    }

    // Function to check if we're on the first card:
    function Carousel$onFirstCard() {
        return (this.current_card == 0) ? true : false;
    }

    function Carousel$setCard(index) {
        // If the index matches the current one, don't do anything:
        if(index == this.current_card)
        {
            return;
        }
        else
        {
            // Calculate the left position we need to move:
            var new_left_pos = this.card_width * index;
            this.card_container.css({ left: -new_left_pos });
            this.indicator.items[this.current_card].removeClass('current');
            this.indicator.items[index].addClass('current');
            this.current_card = index;
            return true;
        }
    }

    // Fill in the prototype that will be assigned to all objects created
    // via `new Carousel`:

    Carousel.prototype.onLastCard = Carousel$onLastCard;
    Carousel.prototype.onFirstCard = Carousel$onFirstCard;
    Carousel.prototype.setCard = Carousel$setCard;

    // Return our constructor out of the scoping function to be assigned
    // to the public var    
    return Carousel;

})();

然后使用是：

$(function(){
    $('.carousel').each(function() { new Carousel($(this)); });
});

同样，上述内容并不意味着完美，完成和拂尘。这是为了演示如何将Carousel重新构造为构造函数并在其原型上设置函数，以便将它们分配给通过new Carousel创建的实例。需要进行一些调试。我很高兴看到您已经在事件处理程序中处理了this的问题（通过您之前self的{​​{1}}变量，现在是init功能）。

一些可能有用的阅读：

• Anonymouses anonymous - 解释为什么我在上面使用了范围函数和真实的命名函数
• Simple, Efficient Supercalls in JavaScript - 关于创建构造函数的讨论（我称之为“类”，但我真的不应该这样，我一直想更新文章）和一些实用程序，以使它更容易，以及在需要时启用层次结构

Answer 2

在迭代轮播div时，每次都创建一个新的Carousel对象：

$(function(){
    $('.carousel').each(function() { new Carousel.init($(this)); });
});

另见http://jsfiddle.net/4nbYR/