如何用JS/jQuery通过类名修改多个按钮innerText？代码未生效

原生JavaScript实现 #

方法一：使用querySelectorAll（推荐） #

querySelectorAll支持标准CSS选择器语法，能更可靠地选中同时拥有多个类名的元素：

function myFunction() {
  // 选中所有同时拥有button和w3-hover-green类的元素
  const targetButtons = document.querySelectorAll(".button.w3-hover-green");
  // 遍历修改文本
  targetButtons.forEach(button => {
    button.innerText = "Hello JavaScript!";
  });
}

如果需要兼容不支持forEach的旧浏览器，也可以用for循环：

function myFunction() {
  const targetButtons = document.querySelectorAll(".button.w3-hover-green");
  for (let i = 0; i < targetButtons.length; i++) {
    targetButtons[i].innerText = "Hello JavaScript!";
  }
}

方法二：修正getElementsByClassName的使用 #

getElementsByClassName支持空格分隔多个类名，但需确保函数在DOM加载完成后执行：

// 等待DOM加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
  function myFunction() {
    const targetButtons = document.getElementsByClassName("button w3-hover-green");
    for (let i = 0; i < targetButtons.length; i++) {
      targetButtons[i].innerText = "Hello JavaScript!";
    }
  }
  myFunction();
});

jQuery实现 #

确保页面已引入jQuery库，使用text()方法可以直接批量修改元素文本：

function myFunction() {
  $(".button.w3-hover-green").text("Hello JavaScript!");
}
// 确保DOM加载完成后调用函数
$(document).ready(function() {
  myFunction();
});

原代码失败的原因 #

1. getElementsByClassName的多类名匹配在部分场景下稳定性不如querySelectorAll；
2. 函数可能在目标元素尚未被DOM解析完成时就执行，导致获取到的元素集合为空。

内容的提问来源于stack exchange，提问作者Gustavjung