2

つまり、ある画像をクリックしてサイズを変更し、他の画像をクリックしてサイズ変更を開始できますが、独立して. これを行う必要があるコードは次のとおりです。

$('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");
    };
  });
});

これは、最初に使用するときにうまく機能します。複数の画像が存在する場合は、画像をクリックできます。クリックした画像は、適切なボタンを押すと適切にサイズ変更されます。ただし、2 番目の画像をクリックしてサイズを変更すると、その画像と最初にクリックした画像の両方が一緒にサイズ変更されます。これは、ページに配置できる画像の数に合わせて調整されます。つまり、3 つの画像は、それぞれがクリックされると一緒にサイズ変更されます。

なぜこれが起こっているのか、どうすればそれを止めることができるのか誰か知っていますか? クリックした順序に関係なく、各画像をクリックして個別にサイズを変更できるようにしたいと考えています。これは、「this」の使用方法と関係があると感じていますが、jquery と javascript に比較的慣れていないため、どうなるかわかりません。

どんな助けでも大歓迎です。ありがとう！

-アレックス

4

2 に答える 2

1

基本的にここでの問題は、画像をクリックするたびに、新しいリスナーをドキュメントにバインドしていることです。

これは、キーを押すたびに、追加したすべてのリスナーを呼び出すことを意味します。やりたいことは、次の画像をクリックしたときにまだドキュメントに残っているリスナーをアンバインドすることです。これは、一度に 1 つの画像だけがキープレスをリッスンすることを意味します。

たとえば、この jsfiddleには次のコードがあります。

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

これにより、入力要素に 2 つのリスナーが追加され、要素内でキーを押すとわかるように、両方のリスナーが実行されます。基本的に、画像をクリックするたびに新しいキープレス リスナーを追加し、古いキープレス リスナーが消去されることはありません。jsfiddle でバインド解除コマンドのコメントを解除すると、最初のリスナーが解放されるため、2 番目のアラートのみが呼び出されることがわかります。キーが一度に 1 つの画像だけをリッスンするようにしたい場合は$(document).unbind('keypress')、クリック リスナーの先頭に次のようなものを配置する必要があります (もちろん、これによりすべてのキー押下がクリアされるため、他のリスナーがある場合はドキュメントに添付されている場合は、それらの管理にもう少し注意を払う必要があります。この問題については、それで十分です)。

于 2012-11-16T04:44:37.850 に答える
0

はい、それがこのコードでどのように機能するかです。

理由は、img.click イベント ハンドラーで、「thisImage」への参照を渡すことで画像のサイズを変更する document.keypress に新しいイベント ハンドラーをアタッチするためです。何が起こるかというと、この画像の document.keypress イベント ハンドラーは、別の画像をクリックしても存続し続け、キーを押すたびに画像のサイズを変更します。

これらのイベント ハンドラーは、新しい画像を選択し続けると蓄積され続けます。

ユーザーが新しい画像をクリックしたときに、以前のイベント ハンドラーを削除する必要があります。

于 2012-11-16T04:46:02.327 に答える