点击单选按钮修改两个<div>类名的更优实现方案？

嘿，我懂你的困扰——用value和id硬绑定类名的方式确实太死板了，新增元素就得改JS逻辑，完全不灵活。其实我们可以用**数据属性（data-*）**来解耦配置和逻辑，让代码更优雅，扩展性拉满！

核心思路：把配置放在HTML里，JS只做通用处理 #

不再把元素选择器和类名硬编码在JS里，而是给每个单选按钮添加一个data-targets属性，用JSON格式定义这个选项要影响的所有元素及其对应的类名。这样不管你要加第三个、第四个元素，只需要在HTML里加配置就行，JS逻辑完全不用动。

具体实现步骤 #

1. 重构HTML结构

给每个单选按钮配置好data-targets，里面包含所有要操作的元素和类：

<!-- 红色选项：影响3个元素，分别添加对应的类 -->
<input type="radio" name="color" checked data-targets='[
  {"selector": "#targetDiv", "class": "color-red"},
  {"selector": "#targetP", "class": "text-red"},
  {"selector": "#targetSpan", "class": "bg-red"}
]'> 红色

<!-- 蓝色选项：同样影响3个元素，对应蓝色类 -->
<input type="radio" name="color" data-targets='[
  {"selector": "#targetDiv", "class": "color-blue"},
  {"selector": "#targetP", "class": "text-blue"},
  {"selector": "#targetSpan", "class": "bg-blue"}
]'> 蓝色

<!-- 绿色选项：新增选项也只需要加配置 -->
<input type="radio" name="color" data-targets='[
  {"selector": "#targetDiv", "class": "color-green"},
  {"selector": "#targetP", "class": "text-green"},
  {"selector": "#targetSpan", "class": "bg-green"}
]'> 绿色

<!-- 目标元素 -->
<div id="targetDiv" class="box">我是DIV盒子</div>
<p id="targetP" class="text">我是段落文本</p>
<span id="targetSpan" class="highlight">我是高亮文字</span>

2. 编写通用jQuery逻辑

只需要一段通用代码，就能处理所有选项的切换，不管新增多少元素：

$(document).ready(function() {
  // 预先定义所有可能的颜色类（方便重置时移除）
  const allColorClasses = [
    'color-red', 'color-blue', 'color-green',
    'text-red', 'text-blue', 'text-green',
    'bg-red', 'bg-blue', 'bg-green'
  ];

  // 监听单选按钮的change事件
  $('input[name="color"]').on('change', function() {
    if (!this.checked) return; // 只处理选中的选项

    // 解析当前选项的配置
    const targets = JSON.parse($(this).data('targets'));

    // 遍历每个目标元素，先重置类，再添加当前选中的类
    targets.forEach(target => {
      const $element = $(target.selector);
      // 移除所有颜色相关的类
      $element.removeClass(allColorClasses.join(' '));
      // 添加当前选项对应的类
      $element.addClass(target.class);
    });
  });

  // 初始化：触发默认选中项的change事件，确保初始状态正确
  $('input[name="color"]:checked').trigger('change');
});

为什么这个方案更好？ #

• 完全解耦：HTML负责配置每个选项的行为，JS只做通用执行，新增元素/选项不用改JS代码。
• 可维护性强：所有配置都在对应的单选按钮上，一目了然，不用在JS里找硬编码的选择器和类名。
• 灵活性高：每个选项可以独立配置不同的目标元素组合，甚至可以让某些选项只影响部分元素。

如果后续需要调整类名或者新增目标元素，直接在data-targets里加一条配置就行，比如要加一个影响按钮的选项，只需要在对应单选按钮的data-targets里加：

{"selector": "#targetBtn", "class": "btn-red"}

完全不用碰JS逻辑，是不是优雅多了？

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