0

我有一个跨度：

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

我在这里做错了什么？

4

3 回答 3

3

这条线是一个问题：

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

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

像这样的东西（现场示例）：

<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 文件中处理的所有元素之后。
于 2010-12-20T06:48:52.227 回答
1

应该是，（例如）

document.getElementsByClassName('attr-value')[0];
于 2010-12-20T06:48:38.467 回答
1

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

  • document.getElementsByClassName();

于 2010-12-20T06:49:10.047 回答