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/

Answer 2

在绑定新的http://jsfiddle.net/6sE5F/31/

之前，您需要取消绑定之前的“点击”处理程序

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

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

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

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

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

Answer 3

您不应嵌套点击处理程序：

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

传递给函数时，JavaScript变量不保持期望值

3 个答案: