0

我正在尝试在多个位置动态更新文本。但是我知道下面的代码不起作用，因为同一个 ID 被多次使用。有任何想法吗？

<html>

Favorite things to eat<p id="fruit">Text will appear</p>
Things that grow on trees<p id="fruit">Text will appear</p>

Dinner<p id="fish">Text will appear</p>
Creature in the ocean<p id="fish">Text will appear</p>

</html>

Javascript：

<script>

document.getElementById("fruit").innerHTML="Oranges";
document.getElementById("fish").innerHTML="Shark";

</script>
4

3 回答 3

3

您不能多次使用该 ID。

但是，您可以为元素分配一个类并使用 jquery 来获取该类的每个元素。

<p class="fruit">text will appear</p>

剧本。

<script type="text/javascript">

$(".fruit").html("Oranges");

</script>
于 2013-09-20T15:10:48.643 回答
2

您可以使用本机 JavaScript document.querySelectorAll

Favorite things to eat <span class="fruit">Text will appear</span>
Things that grow on trees <span class="fruit">Text will appear</span>

Dinner <span class="fish">Text will appear</span>
Creature in the ocean <span class="fish">Text will appear</span>

function replaceTextInClass(className, text) {
    var elms = document.querySelectorAll('.' + className), i;
    for (i = 0; i < elms.length; ++i) {
        elms[i].textContent = text;
    }
}
replaceTextInClass('fruit', 'Oranges');
replaceTextInClass('fish', 'Shark');

演示

您可以类似地使用document.getElementsByClassName，要记住的关键是您必须迭代类似于Array的NodeList。

于 2013-09-20T15:13:15.560 回答
1

如果您使用 class 而不是 id 属性，然后使用 jquery 选择具有该类的元素并设置它们的文本，则可以达到相同的效果：

<html>
<body>
  <p class="fish"> some fish </p>
  <p class="fish"> other fish </p>
</body>
</html>

然后javascript将是：

<script>
$(".fish").html("some text here");
</script>

当然，您需要像这样将 jquery 的链接添加到 html 页面

<script type="text/javascript" src="http://jquery ..." />

只要找到正确的网址。你可以在 jquery.com 上找到它

对于那些不喜欢它的人来说，这里是非 jQuery 方式：

而不是上面的脚本使用：

<script>
var i, 
    elements = document.getElementsByClassName('fish');
for ( i = 0; i < elements.length; i += 1) {
  elements[i].innerHTML = "some text here";
}
</script>

然而，这在某些版本的 IE 中可能不起作用。

于 2013-09-20T15:13:03.870 回答