Question

我正在设计一个使用非常基本的javascript的网页。这是代码：

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（），菠萝（）这样插入文本的不同函数，而是认为只要点击某些内容就更容易调用显示函数，而在显示函数中，如果脚本可以识别单击（即，单击了哪个图像），它可以相应地插入文本。

如何识别点击来源？

Answer 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);
}

Answer 2

您可以将this传递给display（）处理程序，然后您可以访问接收到该点击的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>

Answer 3

有一种更简单的方法。使用变量：

 function selectFruit(fruit){
     if(fruit == 'apple'){
       .....
     }else if(fruit == 'pinapple'){
       .....
     }
     ...
 }

Answer 4

简单易用的解决方案：将参数传递给display函数：

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

更好的解决方案：使用仅javascript（HTML标记中没有JS）traditional甚至是advanced事件处理模型。侦听器（可能附加到多个元素）将传递一个事件对象，您可以从中确定单击了哪个元素。例如：

function clickHandler(eventObj) {
    var elem = eventObj.target;
    if (elem.nodeName.toLowerCase() == 'img' && elem.id)
        display(elem.id);
}

Answer 5

可能是最简单的方法：

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 ) };

}

<强> Demo on jsFiddle

Answer 6

我会走向一个不同的方向：

对于每个可能的“术语”，都隐藏了具有所需内容的文本块。
在每个图片代码中，将其正确占位符的ID添加为rel属性。
让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);
    }
}

Live test case

获取点击javascript的来源？

6 个答案: