如何传递参数控制DOM元素添加或移除class类名

你的代码无法正常工作的核心问题是：不能直接通过.运算符用变量（val）调用classList的方法。JavaScript中，若要通过变量名访问对象的属性/方法，必须使用方括号语法。

另外，classList.add()和classList.remove()本身支持一次性传入多个类名，我们可以优化代码避免重复操作：

test(val) {
    // 把需要操作的元素统一存入数组
    const targetElements = [
        document.querySelector('.file-name'),
        document.querySelector('.file-size'),
        document.querySelector('.uploaded-at')
    ];

    // 遍历元素，根据传入的val动态调用add/remove方法
    targetElements.forEach(element => {
        element.classList[val]('line-through', 'text-gray-400');
    });
}

额外优化建议 #

如果担心传入的val不是预期的"add"或"remove"，可以加一层判断避免报错：

test(val) {
    const targetElements = [
        document.querySelector('.file-name'),
        document.querySelector('.file-size'),
        document.querySelector('.uploaded-at')
    ];

    // 仅在参数合法时执行操作
    if (val === 'add' || val === 'remove') {
        targetElements.forEach(element => {
            element.classList[val]('line-through', 'text-gray-400');
        });
    }
}

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