JavaScript 变量在传递给函数时不包含预期值

Question

我正在使用一些 jQuery 让用户操作图像。用户应该能够双击图像来选择它，然后单击下面出现的一些按钮来调整图像大小或翻转图像。

图像像这样传递给 image_editor 函数:

$('section img').dblclick(function () {
    item_editor(this);
});

然后 item_editor 函数看起来像这样:

var item_editor = function (activeItem) {

    var $activeItem = $(activeItem);

    // Show border around current activeItem
    $('.activeItem').removeClass('activeItem');
    $activeItem.addClass('activeItem');

    // Flip the selected image when the button's clicked
    $('div#flip').click(function () {
        $activeItem.toggleClass('flipped');
    });

}

我把它放到这里的 jsFiddle 中:http://jsfiddle.net/sarahg/6sE5F/30/

我在这里遇到的问题是“翻转”按钮在您第一次使用它时起作用，但是如果您选择不同的图像并尝试翻转那个图像，那么已经翻转过的所有内容都会再次翻转。 activeItem 变量不是我想象的那样。

我四处搜索了一下，我认为这与 JavaScript 闭包有关，但我对它们的理解还不足以让我的代码正常工作。

Answer 1

jQuery 事件监听器不会被替换。它们只是相互堆叠，并在它们捕获您的 click 事件时全部执行，这就是您的情况。如果您双击一张图片偶数次，它会翻转偶数次，所以它看起来就像什么也没发生一样。

在事件处理程序之外添加点击逻辑:

$('section img').dblclick(function() {
    item_editor(this);
});

var item_editor = function(activeItem) {
    $('.activeItem').removeClass('activeItem');
    $(activeItem).addClass('activeItem');
}

$('div#flip').click(function () {
    $('.activeItem').toggleClass('flipped');
});

演示:http://jsfiddle.net/6sE5F/33/