为多个元素添加/移除类名：实现按钮互斥切换状态

要实现你要的效果——点某个按钮从关切换到开时，其他所有按钮都变回关闭状态，核心思路很简单：先把所有按钮的状态重置为关闭，再处理当前点击的按钮，直接改JS代码就行：

修改后的JavaScript代码 #

$('body').on('click', '.icon_product', function () {
    // 先记一下当前按钮点之前是不是开着的
    const wasActive = $(this).hasClass('change_icon-product');
    
    // 把所有.icon_product按钮都变回关闭状态
    $('.icon_product').removeClass('change_icon-product');
    
    // 如果之前是关着的，就把它打开；如果之前是开着的，就让它保持关闭
    if (!wasActive) {
        $(this).addClass('change_icon-product');
    }
});

为啥这么改？ #

• 先全局移除激活类，确保所有按钮先回到初始关闭状态，避免多个按钮同时激活
• 原代码里的if (this.classList.contains("icon_product"))完全没用，因为你本来就是给.icon_product绑定的点击事件，这个判断永远是真，else分支根本不会跑，直接删掉就行

顺便提个小问题 #

你HTML里多个div用了同一个id="main-content_product"，ID在HTML里必须是唯一的，重复ID会导致后续DOM操作出问题，建议改成class：

<section>
    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
        </div>
    </div>
    <!-- 剩下的几个main-content_product都这么改 -->
</section>

CSS和其他HTML部分不用动，改完之后就能实现你要的单选效果，滑块里的按钮状态就不会乱了。

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