无需jQuery：实现购物车添加按钮的addedInCart类切换功能问题求助

看起来你在实现购物车类切换功能时遇到了几个逻辑和拼写问题，我来帮你一步步修正：

首先，你的代码存在的核心问题： #

• 类名拼写不一致：HTML里按钮的类是material-icons，但JavaScript里用的是materials-icon（多了一个s在material后面，还少了s在icon后面），这会导致getElementsByClassName根本获取不到任何元素。
• 事件绑定逻辑错误：你现在的代码是点击按钮后才给所有元素绑定点击事件，还会立刻把所有元素的类都切换一遍，而且每次点击按钮都会重复绑定事件，这显然不是你想要的“点击单个元素切换购物车状态”的效果。
• 函数调用时机错误：事件绑定应该在页面加载完成后就完成，而不是点击按钮才去绑定。

修正后的代码方案（单个按钮独立切换）： #

1. 统一类名的HTML

<!-- 可以复制多个这样的按钮作为不同商品的添加按钮 -->
<button class="material-icons">&#xe8cc;</button>
<button class="material-icons">&#xe8cc;</button>

2. 修正后的JavaScript

// 等待页面所有元素加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有按钮元素，类名和HTML保持一致：material-icons
    const buyButtons = document.getElementsByClassName("material-icons");
    
    // 循环给每个按钮绑定点击事件
    for(let i = 0; i < buyButtons.length; i++){
        buyButtons[i].addEventListener("click", function() {
            // 点击当前按钮时，切换它的addedInCart类
            this.classList.toggle("addedInCart");
        });
    }
});

代码解释： #

• DOMContentLoaded事件确保我们在页面所有元素都加载完成后再去获取按钮并绑定事件，避免出现获取不到元素的情况。
• 给每个按钮单独绑定点击事件，点击时通过this指代当前被点击的按钮，调用classList.toggle("addedInCart")切换类状态，实现点击单个按钮只修改自身的类。
• 类名统一后，getElementsByClassName才能正确获取到所有按钮元素。

如果你需要全局按钮批量切换所有状态： #

如果你的需求是点击一个全局按钮，切换所有商品的购物车状态，代码可以这样写：

HTML

<!-- 全局操作按钮 -->
<button id="toggleAllCart">切换所有购物车状态</button>
<!-- 商品按钮 -->
<button class="material-icons">&#xe8cc;</button>
<button class="material-icons">&#xe8cc;</button>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const toggleAllBtn = document.getElementById("toggleAllCart");
    const buyButtons = document.getElementsByClassName("material-icons");
    
    toggleAllBtn.addEventListener("click", function() {
        // 点击全局按钮时，循环切换所有商品按钮的类
        for(let i = 0; i < buyButtons.length; i++){
            buyButtons[i].classList.toggle("addedInCart");
        }
    });
});

这样就能根据你的需求实现对应的类切换功能啦。

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