1

非常に基本的な JavaScript を使用する Web ページを設計しています。コードは次のとおりです。

html:

<!DOCTYPE html>
<html>
<body>

<img id="apple" onclick="display()" src="images/apple.jpg" width="150" height="150">

<img id="pineapple" onclick="display()" src="images/pineapple.jpg" width="130" height="210">

<br><br>

<div id="description" style="width:300px;height:100px;border-top: 1px solid #000; border-bottom: 4px solid #000; border-left: 2px solid #000; 

border-right: 4px solid #000;padding: 5px;"></div>

<br>

<button type="button" onclick="reset()">Reset</button>

<script type="text/javascript" src="obst.js"></script>

</body>
</html>

これがJavaScriptです：

function display()
{
document.getElementById("description").innerHTML="der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 

Tag hält den Arzt weg<br>- An apple a day keeps the doctor away";
}

function reset()
{
document.getElementById("description").innerHTML="";
}

リンゴの画像をクリックすると、説明ボックスにテキストが表示されます。パイナップルの画像をクリックすると、同じ場所に別のテキストが表示されます。

Apple() や pineapple() などのさまざまな関数を使用してテキストを挿入する代わりに、何かがクリックされるたびに表示関数を呼び出し、表示関数でスクリプトがクリックのソースを識別できれば (つまり、どの画像がクリックされたか)、それに応じてテキストを挿入できます。

クリック元を特定するにはどうすればよいですか?

4

6 に答える 6

1

this.id を使用できます:

<img id="apple" onclick="display(this.id)" src="images/apple.jpg" width="150" height="150">

<img id="pineapple" onclick="display(this.id)" src="images/pineapple.jpg" width="130" height="210">

次に、IDをキャッチします：

function display(clicked_id)
{
 alert(clicked_id);
}
于 2012-11-11T13:01:31.933 に答える
0

display（）ハンドラーに渡すthisと、クリックを受け取ったDOM要素のプロパティにアクセスできます。これがフィドルです：http：//jsfiddle.net/dandv/BaNdS/。基本的に、

<img id="apple" onclick="display(this)" ... >

<img id="pineapple" onclick="display(this)" ... >

<script type="text/javascript">
    function display(self) {
        alert(self.id);
    }
</script>
于 2012-11-11T12:56:43.103 に答える
0

もっと簡単な方法があります。変数を使用します：

 function selectFruit(fruit){
     if(fruit == 'apple'){
       .....
     }else if(fruit == 'pinapple'){
       .....
     }
     ...
 }
于 2012-11-11T12:56:50.010 に答える
0

シンプルで簡単な解決策: 関数に引数を渡しますdisplay:

<img id="apple" onclick="display('apple');" …&gt;
<img id="pineapple" onclick="display('pineapple');" …&gt;

より良い解決策: javascript のみ (HTML マークアップに JS なし)の従来型または高度なイベント処理モデルを使用します。リスナー (複数の要素にアタッチされている可能性があります) にはイベント オブジェクトが渡され、そこからどの要素がクリックされたかを判断できます。例：

function clickHandler(eventObj) {
    var elem = eventObj.target;
    if (elem.nodeName.toLowerCase() == 'img' && elem.id)
        display(elem.id);
}
于 2012-11-11T12:58:15.383 に答える
0

おそらく最も簡単な方法：

var code, node = document.getElementById('description');

code = {
    apple    : "Apple",
    pineapple: "Pineapple"
};

function display( src ) {

    node.innerHTML = node.innerHTML ? "" : code[ src.id ] ;

}​

for ( var i in code ) {

    document.getElementById( i ).onclick = function() { display( this ) };

}

jsFiddle のデモ

于 2012-11-11T13:01:15.783 に答える
0

私は多少異なる方向に進みます：

  1. 可能な「用語」ごとに、目的のコンテンツを含むテキストのブロックを非表示にします。
  2. 各イメージ タグに、適切なプレースホルダーの ID をrel属性として追加します。
  3. ページの読み込み時に JavaScript を実行し、クリック イベントを自動的に割り当てます。

サンプル HTML は次のようになります。

<img id="apple" src="images/apple.jpg" rel="desc_Apple" width="150" height="150" />

<img id="pineapple" src="images/pineapple.jpg" rel="desc_Pineapple" width="130" height="210" />

<div class="item_placeholder" id="desc_Apple">
der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An apple a day keeps the doctor away
</div>
<div class="item_placeholder" id="desc_Pineapple">
der Apfel - Pineapple<br>die Äpfel - Pineapples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An Pineapple a day keeps the doctor away
</div>

これらを非表示にする CSS を忘れないでください。

.item_placeholder { display: none; }

そして最後に、それらすべてをバインドする魔法:

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        var rel = image.getAttribute("rel");
        if (rel && rel.length > 0) {
            image.onclick = ItemImageClick;
        }
    }
};

function ItemImageClick() {
    var rel = this.getAttribute("rel");
    var placeholder = document.getElementById(rel);
    if (placeholder) {
        document.getElementById("description").innerHTML = placeholder.innerHTML;
    } else {
        alert("DEBUG - element not found " + rel);
    }
}

ライブ テスト ケース。

于 2012-11-11T13:05:43.490 に答える