ajax调用时javascript动态内容不受影响

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';
}