javascriptロールオーバーの効果の質問

Question

私は現在jsの本でJSを学んでいます。 ロールオーバーエフェクトの例が私を得ましたので、いくつかの助けが必要です。

Flickr.comにスナップショットをアップロードします。 URLは次のとおりです。http://www.flickr.com/photos/58745632@N05/5389380030/

スナップショットの左側がページで、スナップショットの右側がjavascriptコードです。 私の質問は、赤いボックスの内容を緑色のボックスのコードに変更することです。 できれば、この行を追加するのはなぜですか？"thisLink.imgToChange = thisImage"？ 「thisLink.imgToChange」と「thisImage」の関係は何ですか？ 同じものなのですか同じものですか？ 誰かが私のためにそれを説明できますか？ ありがとうございます。

Answer 1

thisImageは、イメージオブジェクトへの参照です。それは関数として変数として渡されています。

イメージオブジェクトには、ソース（.src）、.widthなどのプロパティがあります。

thisLinkも対象であり、それにも適しています。したがって、thisLink.imgToChange = thisImageは、関数に供給される画像に「imgToChange」を設定します。 imgToChangeは、プログラマが選択した完全に任意のプロパティです。後で使用するデータを隠すのに使われています。

このコードはすべて、ロールオーバーを実行する「難しい方法」を示しています。 "document.getElementById"を何度も繰り返し入力（または使用）しなければならないことは痛みです。ほとんどの場合、これらのことを自動化するスクリプトに依存しています。

フレームワークは、ここで作業しているコードタイプの基本的に最適化されたバージョンであり、汚い作業を処理するために開発されました。最も一般的なフレームワークは、これまでにはjQueryです。

jQueryを使用して同じことを行うことは、1行のコードで行うことができます。

ここではanother postingです。

Answer 2

短い答え：

.imgToChangeとthisImgは、同じ場所を参照してください。 .imgToChangeがプロパティとして追加されますので、後で使用するのは簡単です（onmouseout関数のように）。あなたのコメントについて

UPDATE

を：それは（おそらく）のいずれかの方法を動作しません。

setupRollover()は複数回呼び出されるため、変数thisImageは呼び出されるたびに別のイメージノードを指します。緑のボックスのコードは、最新のthisImageにのみ適用されます。

赤いボックスはthisを使用します。これは「イベントを発生させたオブジェクト」を意味するためです。赤いボックスは、適切な画像を参照するために各オブジェクトを設定します。そして、thisがマウスオーバーすると、正しい画像が変更されます。

自分で試してみると、説明するよりも見やすいです。

Answer 3

これはWeb用ストレートのJavaScript &のAjaxの外にあることを考える：特にあなたがページ上（ライン・バイ・ライン）の説明ではとのトラブルを抱えているか、ビジュアルクイックスタートガイド、第7版 96-97？

_{私が共同で書いた、btw。}