传递到函数中时，JavaScript变量不包含预期值

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

图像被传递到图像编辑器函数，如下所示：

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

}

然后项编辑器函数如下所示：

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

}

我在这里把它放到一个JSFIDLE中：

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

---

我做了一些搜索，我认为这与JavaScript闭包有关，但我还没有足够的理解它们，无法使我的代码正常工作。

在绑定新的“单击”处理程序之前，您需要解除以前“单击”处理程序的绑定

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

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

---

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

在绑定新的“单击”处理程序之前，您需要解除先前“单击”处理程序的绑定

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

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

---

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

不应嵌套单击处理程序：

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

---

不应嵌套单击处理程序：

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

---

jQuery事件侦听器不会被替换。它们只是堆叠在一起，当它们捕捉到您的

单击事件时，所有这些事件都会执行，这就是您的情况。如果你双击一个图像偶数次，它会被翻转偶数次，所以看起来好像什么都没发生

在事件处理程序外部添加单击逻辑：

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

演示：
jQuery事件侦听器不会被替换。它们只是堆叠在一起，当它们捕捉到您的
单击事件时，所有这些事件都会执行，这就是您的情况。如果你双击一个图像偶数次，它会被翻转偶数次，所以看起来好像什么都没发生

在事件处理程序外部添加单击逻辑：

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

演示：
可能不应该解除所有
单击
处理程序的绑定。对特定函数进行绑定，然后解除该特定句柄的绑定可能不应该解除所有
单击
句柄的绑定。对特定函数进行绑定，然后取消绑定该特定处理程序