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 回答