Question

所以我正在编写一些jquery，它基本上是为了在我点击它时调整任何图像的大小，这意味着我可以点击一个图像并调整它的大小，然后点击任何其他图像并开始调整它的大小，但是理想的。我必须这样做的代码如下：

$('img').click(function(e) {
  thisImage = this;
  $(document).keypress(function(event) {
    if ( event.which == 115) {
      $(thisImage).css('width', "+=25").css('height', "+=25");
    };

    if ( event.which == 97) {
      $(thisImage).css('width', "-=25").css('height', "-=25");
    };
  });
});

首次使用时，此功能正常。当存在多个图像时，您可以单击图像，当您点击相应的按钮时，单击的图像将适当调整大小。然而，在单击第二个图像以调整其大小时，它和您单击的第一个图像将开始一起调整大小。这可以缩放到您可以放在页面上的图像数量，即三个图像将在每次点击后调整大小。

有谁知道为什么会这样，我怎么能阻止它？我希望能够单击每个图像并能够独立调整大小，无论单击它的顺序如何。我觉得这与我使用“this”的方式有关，但我对jquery和javascript相对较新，所以我无法想象它会是什么。

任何帮助将不胜感激。谢谢！

-Alex

Answer 1

基本上，这里的问题是每次单击图像时，都会将新侦听器绑定到文档。

这意味着每次按某个键时，都会调用已添加的所有侦听器。您想要做的是取消绑定当您单击下一个图像时仍然在文档上的侦听器，这意味着一次只有一个图像将监听您的按键。

例如，在this jsfiddle中我们有代码：

 $('#in').keypress(function(event) { alert('first'+event.which); });
//$('input').unbind('keypress');
$('#in').keypress(function(event) { alert('second'+event.which); });

这会向输入元素添加两个侦听器，正如您在元素中按键所看到的那样，它会导致两个侦听器都运行。基本上，每次单击图像时，您都会添加一个新的按键侦听器，而旧的按键侦听器永远不会被清除。如果取消注释jsfiddle中的unbinding命令，您将看到只调用第二个警报，因为第一个侦听器已被释放。如果您只希望键一次只能监听一个图像，那么您将希望在点击监听器的开头有$(document).unbind('keypress')行的内容（当然这将清除 all 按键，所以如果您有其他监听器附加到文档，您将需要更加小心地管理它们，对于这个问题它就足够了。

Answer 2

是的，这就是使用此代码的方式。

原因是，在img.click事件处理程序中，您在document.keypress上附加了一个新的事件处理程序，它将通过传递对'thisImage'的引用来调整图像大小。会发生什么，即使您单击另一个图像，此图像的document.keypress事件处理程序仍将继续存在，并将在每个按键上调整图像大小。

当您继续选择新图像时，这些事件处理程序将继续令人沮丧。

您需要做的是在用户点击新图片时删除以前的事件处理程序。

一次一个地通过jquery调整多个图像的大小

2 个答案: