1

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

4

3 回答 3

2

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/

于 2013-05-20T16:10:01.760 回答
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' 的调用的影响。

于 2013-05-20T16:07:09.457 回答
1

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

演示

$('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');
    });
于 2013-05-20T16:09:56.063 回答