JSは==========各TDをクリックすることでジャンプの写真を達成します
スタイル:
.focus {背景:#1 0F0}
構造:
<TDクラス= "フォーカス"> </ TD>
<TD> </ TD>
<TD> </ TD>
<IMG SRC = "IMG / 1.JPG">内のimgの下に3枚が2.JPG 3.JPGのが1.JPGたされている//
<スクリプト>
//取得TD
セレクタ要素によって取得= document.querySelectorAll( "TD")// CSS VaRのTDSは==>アレイが得られます
//配列をループでは、各TDのためのイベントを追加]をクリック
ため(VAR i = 0; iはtds.lengthを<; iは++){
TDS [I] .setAttribute( "番号"、I + 1)// ====方法は、I 3を解決しました。iは1 +原因IMGは2,3から開始経路であります
TDS [i]が.onclick =関数(){//ここでは、TDによれば、iの各値について取得し、各TDのクリックイベントを追加したいのですが、forループ内の機能は、クリック、クリックイベントが行われていませんとき、サイクルが終了したため。
//私は私の特定の値を取得するためのサイクル中===== 3「溶液に取ら各時間であり、属性値は、それがTDの属性として保存された場合、
//これを使用すると、プロパティ値を取得するには、内側から、各時間tdを取得したいです
VAR指数= this.getAttribute(「番号」)は、i + 1、この値は、ここで取り出される寄託番号の前にプロパティを設定する//
再SRCパスに画像の//インデックス番号を「の.jpg」のvar SRC =「IMG /」+インデックス+、パスは、画像を変更することができます
背景色があるだろうとき//次の2つのコード行を達成するために、現在の背景色表示TD、それぞれのTDをクリックしてください
document.querySelector(「フォーカス。」)クラス名=「」; //現在の古いの現在の交差点をクリアするには、最初のTDの背景色を設定しています
this.className =「.focus」// TDそれは背景色のTDを変更しますフォーカスクラスを追加するたびに、クリックしてください
}
}
</ SCRIPT>
今日の学習のポイント:
最初のサイクルのために終了し、その後、機能がクリックできるようになりますクリックされたときに、ループのために書かれた1. [イベント機能。
====ので(VAR i)を私のための問題に注意を払います。
2.クラス名
div.className ==内蔵の性質、あなたはクラス名を使用したい取得クラス名