如何移除div数组中各元素classList的CSS类并为div分配指定CSS类

你代码里存在三处核心错误，直接导致类无法移除、后续点击无响应：

• querySelectorAll 用法错误：该方法仅接收一个CSS选择器字符串作为参数，你传入多个独立字符串的写法只会匹配第一个选择器.assay1Plate，其余类对应的元素完全不会被选中。正确写法是把多个选择器合并到同一个字符串，用逗号分隔：document.querySelectorAll(".assay1Plate, .assay2Plate, .assay3Plate, .assay4Plate")
• classList.contains 调用错误：contains是classList的方法，需要调用传参才能判断类是否存在，你直接把方法本身和类名字符串做相等判断，结果永远为false，所以移除类的逻辑从来没有执行过，这是类无法删除的核心原因。正确用法是plates[i].classList.contains("assay1Plate")
• 循环边界硬编码错误：你直接写死循环上限为35，如果实际匹配到的plates元素数量不足35，访问plates[i]会得到undefined，触发报错导致后续代码终止执行，这是后续点击按钮无响应的原因。应该用plates.length作为循环上限。

修正后的a4按钮代码 #

a4.addEventListener('click', function()
{
    // 重置其他按钮选中状态
    var button = document.getElementsByClassName('unchosen');
    for (var i = 0; i < button.length; i++) 
    {
      button[i].classList.remove('chosen');
    }
    a4.classList.add('chosen');

    // 选中所有plate类元素
    const plates = document.querySelectorAll(".assay1Plate, .assay2Plate, .assay3Plate, .assay4Plate");
    // 遍历所有匹配到的元素
    for (var i = 0; i < plates.length; i++)
    {  
        // 移除其余assay类
        if (plates[i].classList.contains("assay1Plate")) {
            plates[i].classList.remove("assay1Plate");
            console.log("Removed assay 1 plate class due to assay 4 click");
        }
        if (plates[i].classList.contains("assay2Plate")) {
            plates[i].classList.remove("assay2Plate");
        }
        if (plates[i].classList.contains("assay3Plate")) {
            plates[i].classList.remove("assay3Plate");
        }
        // 新增assay4类
        plates[i].classList.add("assay4Plate");
    }
});

优化方案（可选） #

你不需要为四个按钮重复写四套逻辑，直接抽象为通用函数即可，代码更简洁易维护：

// 通用切换assay类的函数，入参为要激活的assay编号
function switchAssay(assayNumber) {
    // 重置所有按钮选中状态
    document.querySelectorAll('.unchosen').forEach(btn => btn.classList.remove('chosen'));
    // 激活当前点击的按钮（假设按钮id为a1/a2/a3/a4）
    document.getElementById(`a${assayNumber}`).classList.add('chosen');
    
    // 批量处理plate元素
    document.querySelectorAll(".assay1Plate, .assay2Plate, .assay3Plate, .assay4Plate").forEach(plate => {
        // 一次性移除所有assay类，无需逐个判断
        plate.classList.remove("assay1Plate", "assay2Plate", "assay3Plate", "assay4Plate");
        // 添加目标assay类
        plate.classList.add(`assay${assayNumber}Plate`);
    });
}

// 绑定四个按钮的点击事件
a1.addEventListener('click', () => switchAssay(1));
a2.addEventListener('click', () => switchAssay(2));
a3.addEventListener('click', () => switchAssay(3));
a4.addEventListener('click', () => switchAssay(4));

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