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

【问题标题】：Resizing multiple images via jquery one at a time通过 jquery 一次调整多个图像的大小
【发布时间】：2012-11-04 19:22:48
【问题描述】：

所以我正在编写一些 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 比较陌生，所以我想不出它会是什么。

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

-亚历克斯

【问题讨论】：

能否请您也展示一下您的 HTML 的一部分..

标签： javascript jquery image resize

【解决方案1】：

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

这意味着每次您按下一个键时，您都会调用您添加的所有侦听器。您想要做的是unbind单击下一张图片时仍在文档上的侦听器，这意味着一次只有一个图片会监听您的按键。

例如，在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 em> 按键，因此如果您在文档中附加了其他侦听器，您将需要更加小心地管理它们，对于这个问题就足够了）。

【讨论】：

是的，成功了！我认为它与此类似，我只是对 jquery 和 javascript 不够熟悉，无法知道这样的命令。再次感谢！
嘿，谢谢，我想这里的基本概念是函数keypress只是bind('keypress'...的别名，所以你应该看看jquery处理事件的方式，以及这个概念一般的单线程事件循环。希望这有助于您学习 javascript，这是一种 rad 语言 :)

【解决方案2】：

是的，这就是这段代码的工作方式。

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

随着您不断选择新图像，这些事件处理程序将继续累积。

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

【讨论】：