用图像替换文本 - JavaScript (getElementsByClass)

Replace Text with Image - JavaScript (getElementsByClass)

提问by Andrew

I have a span:

我有一个跨度：

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

And I want to replace that text with an image, based on the text

我想根据文本用图像替换该文本

Here is what I have:

这是我所拥有的：

<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>

What am I doing wrong here?

我在这里做错了什么？

回答by T.J. Crowder

This line is an issue:

这一行是一个问题：

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

document.getElementsByClassshould be document.getElementsByClassName, and it returns a NodeList, which doesn't have an innerHTMLproperty. You'd want to loop through the NodeListto look at the innerHTMLof each element.

document.getElementsByClass应该是document.getElementsByClassName，它返回一个NodeList没有innerHTML属性的 。您想循环NodeList查看innerHTML每个元素的 。

Something like this (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>

Changes:

变化：

1. Put the whole thing in an anonymous function and immediately execute that function, to avoid creating global symbols.
2. Use the correct getElementsByClassName
3. Loop through them
4. Operate on the innerHTMLof each element.

1. 将整个内容放在匿名函数中并立即执行该函数，以避免创建全局符号。
2. 使用正确的 getElementsByClassName
3. 循环它们
4. 对innerHTML每个元素的 进行操作。

Notes:

笔记：

• IE doesn't have getElementsByClassName, so you'll want to be sure you're loading a script that provides it on IE. That's not provided in the live example above, use Firefox, Chrome, or Opera. (Just search for "getElementsByClassName for IE" and you'll find several implementations to choose from.)
• The above scripttag will need to be placed after all of the elements you want to process in the HTML file.

• IE 没有getElementsByClassName，所以你需要确保你正在加载一个在 IE 上提供它的脚本。上面的示例中没有提供，请使用 Firefox、Chrome 或 Opera。（只需搜索“getElementsByClassName for IE”，您就会找到几个可供选择的实现。）
• 上面的script标签需要放在 HTML 文件中所有要处理的元素之后。

回答by Babiker

• class="attr attr-value"and you're calling
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName();

• class="attr attr-value"你在打电话
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName();

回答by Kenny Shen

It should be, (e.g)

应该是，（例如）

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