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>

的变化：

将整个事物放在一个匿名函数中并立即执行该函数，以避免创建全局符号。
使用正确的getElementsByClassName
循环使用
在每个元素的innerHTML上操作。

注意：

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

Answer 2

应该是，（例如）

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

Answer 3

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

用图像替换文本 - JavaScript（getElementsByClass）

3 个答案: