jQuery实现点击额外按钮切换toggle switcher的normal/active CSS类

核心错误点 #

• 选择器不匹配：按钮使用的是id="changeButton"，你代码中的.changeButton是类选择器，无法选中对应元素
• 类操作对象错误：你把激活类添加到了点击按钮本身，而非需要切换状态的开关元素，同时没有同步开关的勾选状态，会导致按钮点击和开关本身点击的状态不同步

修正后代码 #

$(function(){
    $('#changeButton').on('click', function(e){
        // 阻止a标签默认的跳转行为
        e.preventDefault();
        // 获取开关元素
        const $switch = $('.premium-content-toggle-switch');
        // 切换开关的常态/激活类
        $switch.toggleClass('premium-content-toggle-switch-normal premium-content-toggle-switch-active');
        // 同步复选框勾选状态，和原有开关点击逻辑联动
        $switch.prop('checked', $switch.hasClass('premium-content-toggle-switch-active'));
        // 如果原有价格切换逻辑绑定在checkbox的change事件上，可取消下方注释主动触发事件
        // $switch.trigger('change');
    });
});

补充说明 #

代码中已经同步了复选框的选中状态，只要你原有开关的价格切换逻辑是基于类或者复选框状态实现的，不需要修改原有逻辑就能正常生效。

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