2

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

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

-亚历克斯

4

2 回答 2

1

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

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

例如，在这个 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')在点击侦听器的开头有一些类似的东西（当然这会清除所有按键，所以如果您有其他侦听器附加到文档中，您需要更加小心地管理它们，对于这个问题就足够了）。

于 2012-11-16T04:44:37.850 回答
0

是的，这就是它与此代码一起工作的方式。

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

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

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

于 2012-11-16T04:46:02.327 回答