javascript - 用图像替换文本 - 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

这一行是一个问题:

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 文件中您要处理的所有元素之后。