獲取點擊源的JavaScript？

我正在設計一個使用非常基本的JavaScript的網頁。下面的代碼：獲取點擊源的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=""; 
}

單擊說明框中蘋果顯示文本的圖像上。點擊菠蘿圖像可以在同一個地方顯示一些其他文字。

而不是像蘋果（），菠蘿（）插入文本使用不同的功能，我認爲它會更容易調用顯示功能，只要點擊一下，並在顯示功能，如果腳本可以識別源點擊（即點擊哪個圖像），它可以相應地插入文本。

我該如何解決識別點擊源的問題？

來源

2012-11-11 Prashanth Victor

您會將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-11 12:56:43

有一個更簡單的方法。使用一個變量：

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

來源

2012-11-11 12:56:50

我不認爲OP需要有很多if-else語句的函數。看看[一百萬條if語句的替代方案]（http://stackoverflow.com/q/10029089/1048572） – Bergi

簡單易用的解決方案：將參數傳遞給display功能：

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

更好的解決方案：使用JavaScript只（沒有JS在HTML標記）traditional或甚至還有事件處理模型advanced。監聽器（可能連接到多個元素）將傳遞一個事件對象，從中可以確定哪個元素被點擊。例如：

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

來源

2012-11-11 12:58:15 Bergi

也許最簡單的方法：

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

來源

2012-11-11 13:01:15 0x499602D2

您可以使用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-11 13:01:31

我會去一個稍微不同的方向：

對於每一個可能的「術語」已隱藏與所需內容的文本塊。
在每個圖片標籤中添加其合適佔位符的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。

來源

2012-11-11 13:05:43

獲取點擊源的JavaScript？

回答

相關問題