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

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 比较陌生，所以我无法想象它会是什么。

如有任何帮助，我们将不胜感激。谢谢!

-亚历克斯

Answer 1

这里的问题本质上是每次单击图像时，都会将一个新的监听器绑定(bind)到文档。

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

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

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

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