传递给函数时 JavaScript 变量不保持预期值答案

【问题标题】：JavaScript variable not holding expected value when passed into function传递给函数时 JavaScript 变量不保持预期值
【发布时间】：2013-05-15 06:02:58
【问题描述】：

我正在使用一些 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 闭包有关，但我无法充分理解它们以使我的代码正常工作。

【问题讨论】：

标签： javascript jquery closures scope

【解决方案1】：

在绑定新的http://jsfiddle.net/6sE5F/31/之前，您需要取消绑定之前的“点击”处理程序

  $('div#flip').unbind('click').click(function () {
    // ...

向 jQuery 连续请求它为特定事件绑定处理程序只需添加更多处理程序。除非你让它们消失，否则旧的不会消失。

如果可能有其他“点击”处理程序绑定到该元素，您可以使用限定符告诉 jQuery 您只是在谈论一种特定类型的“点击”处理程序：

  $('#flip').unbind('click.kitten-flipper').on('click.kitten-flipper', function() {
    // ...

“.something”限定符不影响事件处理过程，但它将这些点击处理程序标识为相关的。没有限定符或使用不同限定符绑定的其他点击处理程序不会受到对 `.unbind' 的调用的影响。

【讨论】：

可能不应该解除所有 click 处理程序的绑定。绑定到特定函数，然后取消绑定该特定处理程序

【解决方案2】：

你不应该嵌套点击处理程序：

DEMO

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

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');
    });

【讨论】：

【解决方案3】：

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/

【讨论】：