1

ボタンのクリックを使用して div の内容を変更したいのですが、別のクリックで古いコンテンツを div に戻したいのですが、ボタンの画像を使用しています...

私のdivコードは以下です

<div class="pic-container" style="position:absolute; left: 3px; top: 102px;">
<div class="pic-row" >
<img src="images/A.Png" />
<img src="images/B.Png" />     
<img src="images/C.Png" />
<img src="images/D.Png" />
<img src="images/E.Png" />
<img src="images/F.Png" />
<img src="images/G.Png" />
<img src="images/H.Png" />   
<img src="images/I.Png" />
<img src="images/J.Png" />  
<img src="images/K.Png" />   
<img src="images/L.Png" />                    
<img src="images/M.Png" />
<img src="images/N.Png" />
<img src="images/O.Png" />
<img src="images/P.Png" />
<img src="images/Q.Png" />
<img src="images/R.Png" />                       
<img src="images/S.Png" />
<img src="images/T.Png" />
<img src="images/U.Png" />
<img src="images/V.Png" />              
<img src="images/W.Png" />                              
<img src="images/X.Png" />
<img src="images/Y.Png" /> 
<img src="images/Z.Png" />
</div>
</div>
<img  style="position:absolute; left: 272.5px; top: 647px; width: 171px; height: 122.5px;" src="images/Btn_Lower.png"  id="image1" />

この問題を解決するのを手伝ってください

4

1 に答える 1

4

問題を解決することで混乱させたくはありません。代わりに、短く簡単な例を示したいと思います。

JavaScript が必要な HTML を使用するだけでは実現できません。ここに方法があります。

1)コンテンツというと、javascriptではinnerHTMLと呼ばれます。

2) onclickについてご存知だと思いますが、クリックイベントと呼ばれます。それと同様に、 keypress、doubleclickなどの javascript にはさまざまなイベントがあります。

3)一意のセレクターと呼ばれるIDを知っていることを願っています。classのような他のセレクターと、 HTML5 data-attributesを使用できます。

4) 要素を選択するには、JS で次のようなさまざまな方法を使用できます。

document.getElementById         // select element based on Unique ID
document.getElementsByClassName // select element based on class
document.getElementsByTagName   // select element based on Tag name

JavaScript について詳しく知りたい場合は、Mozilla Developers Networkを参照してください。

今回ご紹介したい撮影例はこちらです。

HTML: 

<div id="divd">First</div>
<button onclick='changeMe()'>Click It</button>

JS:

function changeMe() {
    var div = document.getElementById('divd').innerHTML;
    if (div === 'First') {
        document.getElementById('divd').innerHTML = "Second";
    } else {
        document.getElementById('divd').innerHTML = "First";
    }
}

デモ

于 2013-08-03T06:36:50.267 に答える