如何用jQuery实现点击单选按钮动态更新div的class属性

问题原因 #

你当前的代码仅对目标元素追加样式类，没有移除之前选中的背景色类，多个bg-开头的Bootstrap背景类同时挂载在#ticker_exp元素上时，会受CSS优先级规则影响，只有先加载的类样式生效，因此后续切换选项时看不到视觉变化。文字颜色选择逻辑也存在相同的隐患。

解决方法 #

修改jQuery代码，每次添加新样式类之前，先移除同类型的旧样式类即可：

// 背景色切换逻辑
$("input[name=ticker_bg]").on('change',function(){
    const bgclr = $(this).val();
    // 先移除所有背景色类，保留p-2等其他功能类
    $("#ticker_exp").removeClass("bg-warning bg-primary bg-secondary bg-success bg-danger").addClass(bgclr);
    console.log(bgclr);
});         

// 文字颜色切换逻辑，统一用change事件更符合单选按钮交互逻辑
$("input[name=ticker_font]").on('change',function(){
    const txtclr = $(this).val();
    // 先移除所有文字颜色类
    $("marquee").removeClass("text-dark text-white").addClass(txtclr);
    console.log(txtclr);
});

拓展说明 #

如果你后续新增了更多背景色/文字色选项，只需要把新增的类名补充到removeClass的参数列表里即可。如果不想每次新增选项都修改列表，也可以用正则匹配移除对应前缀的类：

// 移除所有bg-开头的类，无需手动罗列所有背景类
$("#ticker_exp").removeClass(function (index, className) {
  return (className.match(/(^|\s)bg-\S+/g) || []).join(' ');
}).addClass(bgclr);

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