jQuery 事件只适用于最后一个元素

Question

这有点棘手。我正在构建一个 Carousel View ，它在加载时使用 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 > 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

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

我会考虑将 Carousel 改造为一个构造函数(您使用 new 的那种)。 @Boo 刚刚在Carousel.init 前面抛出一个new，这是一个好的开始，但是正在创建的对象不会有你放置的各种属性在 Carousel 上。

这是一个快速的返工；它完全未经测试，但应该会带您朝着正确的方向前进:

// 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 重新表述为 构造函数 并在其原型(prototype)上设置函数，以便将它们分配给通过 new Carousel 创建的实例.需要进行一些调试。我很高兴看到你已经在事件处理程序中处理了 this 的问题(通过你的 self 变量，在以前的 init现在是 Carousel 函数)。

一些可能有用的读物​​:

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