替換圖片文字 - 的JavaScript（getElementsByClass）

Question

我有一個跨度：

<span class="attr attr-value">Brand Name</span> 

而且我想，以取代一個形象，文本，根據文本

這裏是我有：

<script type="text/javascript"> 
var oldHTML = document.getElementsByClass('attr-value').innerHTML; 
var filename = oldHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); 
var newHTML = "<img src='http://www.example.com/" + filename + ".jpg'>"; 
document.getElementsByClass('attr-value').innerHTML = newHTML; 
</script> 

我在這裏做錯了什麼？

Answer 1

它應該是，（例如）

document.getElementsByClassName('attr-value')[0]; 

Answer 2

此行是一個問題：

var oldHTML = document.getElementsByClass('attr-value').innerHTML; 

document.getElementsByClass應該是document.getElementsByClassName，並返回一個NodeList，它不具有innerHTML財產。您需要遍歷NodeList來查看每個元素的innerHTML。

像這樣的東西（live example）：

<script type="text/javascript"> 
(function() { 
    var list, index, element, filename; 
    list = document.getElementsByClassName('attr-value'); 
    for (index = 0; index < list.length; ++index) { 
     element = list[index]; 
     filename = element.innerHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); 
     element.innerHTML = "<img src='http://www.example.com/" + filename + ".jpg'>"; 
    } 
})(); 
</script> 

變化：

1. 把整個事情在一個匿名函數，並立即執行該功能，避免產生全局符號。
2. 使用正確的getElementsByClassName
3. 遍歷他們
4. 操作上的各個元素的innerHTML。

注：

• IE沒有getElementsByClassName，所以你要確保你加載腳本，提供它的IE瀏覽器。這在上面的實例中沒有提供，請使用Firefox，Chrome或Opera。 （只需搜索「getElementsByClassName for IE」，你會發現有幾種實現可供選擇。）
• 以上script標記將需要放置在HTML文件中要處理的所有元素之後。

Answer 3

• class="attr attr-value"和你打電話
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName();