javascript函數 - 正確的方式做到這一點

什麼是正確的方式做到這一點：在鏈接標籤與此

<script language="javascript"> 
function flag(nation) 
{ 
this.nation=nation; 
document.getElementById("flag").innerHTML="<img src='images/flags/'+nation+'.jpg'>"; 
} 
</script>

：的onClick =「標誌（scotislands）「;並且圖像名稱爲scotislands.jpg

非常感謝， B.

來源

2010-02-02 Bift

在以下行中，你有你的字符串標識符混合起來：

document.getElementById("flag").innerHTML="<img src='images/flags/'+nation+'.jpg'>";

它應該是：

document.getElementById("flag").innerHTML='<img src="images/flags/'+nation+'.jpg">';

編輯
此外，喬爾發現，onClick="flag(scotislands)";應該是onClick="flag('scotislands')";

來源

2010-02-02 14:55:51

賓果 - 謝謝大家！ – Bift 2010-02-02 15:02:56

你需要引用的鏈接標籤的文本，否則它會嘗試並未能找到一個變量名scotislands。

onClick="flag('scotislands');"

隨後的innerHTML的分配更改爲以下：

document.getElementById("flag").innerHTML="<img src='images/flags/" + nation + ".jpg'>"

注意內部使用單引號的設置URL的，而是圍繞每個嵌入式文本位的雙引號。

儘管如此，我寧願不引人注意的東西（標記中沒有代碼）。使用框架，如jQuery，我會做一些事情，如：

<a href="#scotislands" class="flag-identifier">Scotislands</a>

然後使用JavaScript，我想添加一個處理所有這些鏈接：

$(function() { 
    $('a.flag-identifier').click(function() { 
     var flag = $(this).attr('href').replace('#',''); 
     $('#flag').html('<img src="images/flags/' + flag + '.jpg" />'); 
     return false; 
    }); 
});

這將增加一個點擊事件處理它從錨點上的href獲取標誌名稱，然後用通過將國家名稱添加到圖像url構建的圖像替換指定元素flag的內容。請注意，我忽略了全局變量nation，但是如果需要，您也可以從click處理程序中輕鬆設置它。

來源

2010-02-02 14:46:06 tvanfosson

它只返回：內國旗的div？ – Bift 2010-02-02 14:52:43

糟糕。我錯過了你的報價也是錯誤的。我會更新。 – tvanfosson 2010-02-02 14:55:19

一般而言，我更喜歡不引人注意的代碼，但缺點是您將事件處理程序綁定到可能永遠不會被點擊的元素，並且需要性能。所以onclick/onwhatever屬性並不總是一件壞事。 – Alex 2010-02-02 14:59:14

您正在將innerHTML設置爲的字符串未正確引用。試試這個：

document.getElementById("flag").innerHTML="<img src='images/flags/'+nation+'.jpg'>";

此外，你的onClick試圖發送一個名爲「scotislands」的不存在的對象。試試這個：

onClick="flag('scotislands');"

來源

2010-02-02 14:55:31

function flag(nation) { 
    var myFlag = document.getElementById("flag").getElementsByTagName("img")[0]; 
    myFlag.src = "images/flags/"+nation+".jpg"; 
}

來源

2010-02-02 14:56:10 Sampson

我會爲完整的DOM路線+1，但我不參與投票:) – 2010-02-02 14:59:23

這相當依賴於'flag'元素內已經有一個圖像。 – 2010-02-02 16:06:36

@Tim：是的。我假設一個標誌默認顯示。 – Sampson 2010-02-02 16:18:41

這取決於您所說的「正確」。我從你使用innerHTML，你不是說「符合公認的標準，如DOM」事實上懷疑，但是這就是你從我這裏得到什麼：

function flag(nation) { 
    var flagEl = document.getElementById("flag"); 
    while (flagEl.firstChild) { 
     flagEl.removeChild(flagEl.firstChild); 
    } 
    var img = document.createElement("img"); 
    img.src = "images/flags/" + nation + ".jpg"; 
    flagEl.appendChild(img); 
}

來源

2010-02-02 16:05:52

javascript函數 - 正確的方式做到這一點

回答

相關問題