1

我正在设计一个使用非常基本的 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()、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函数：

<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

您将传递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>
于 2012-11-11T12:56:43.103 回答
0

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

 function selectFruit(fruit){
     if(fruit == 'apple'){
       .....
     }else if(fruit == 'pinapple'){
       .....
     }
     ...
 }
于 2012-11-11T12:56:50.010 回答
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 回答