JavaScript 动态内容在 AJAX 调用时不受影响

Question

我是javascript的新手，我使用PHP变量动态创建的链接，如下所示

$addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'"    onClick=addcart('.@$product_id.',"add")><span class="allitem"
<font color="#A2F3AB">Added</font></span></button>';

这是我的 php 变量动态创建的，如下所示。
已添加 已添加 已
添加

我想一键更改所有变量的内容"添加"为"添加"，我正在使用 ajax 函数更改该文本，如下所示。

function clearcart(msg) {
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('cartreturn').innerHTML = xmlhttp.responseText;
document.getElementsByClassName('allitem').innerHTML = "Add";
}
}
xmlhttp.open("GET", "/addcart.php?msg=" + msg, true);
xmlhttp.send();
}

但是第一个链接文本只受影响..其他不受影响 我怎么能解决这个问题

Answer 1

document.getElementsByClassName返回一个NodeList。您必须遍历所有元素：

var allItems = getElementsByClassName('allitem');
for (var i = 0; i < allItems.length; i++) {
allItems[i].innerHTML = 'Add';
}

Answer 2

看到这个问题。

你不能做document.getElementsByClassName('allitem').innerHTML.

你可以做document.getElementsByClassName('allitem')[0].innerHTML = "Add"

您是否有几个带有"allitem"类的元素？如果你不这样做，那么也许你应该使用id，而不是类，然后调用document.getElementById('allitem').innerHTML = "Add";