jQuery高亮颜色切换功能失效求助：仅显示绿色需支持多色

嘿，我看了你的代码，终于搞懂为啥只有绿色高亮能用了——现在只有绿色按钮绑定了点击事件，就算给其他按钮加了事件，原来的逻辑也只会一直加固定的绿色.highlight类，根本不会切换到其他颜色。下面是个超简单的修复方案，不用大改你的代码结构：

1. 给所有颜色按钮加统一标识 #

先修改HTML里的按钮，给每个按钮加个data-color属性，用来对应不同的高亮样式类，这样不用写一堆重复的点击事件：

<button class="highlight-btn" data-color="green">绿色高亮</button>
<button class="highlight-btn" data-color="red">红色高亮</button>
<button class="highlight-btn" data-color="blue">蓝色高亮</button>
<button class="highlight-btn" data-color="yellow">黄色高亮</button>

2. 补充多色高亮的CSS样式 #

在CSS里添加对应颜色的高亮类，保留你原来的绿色效果，新增其他颜色：

.highlight-green { background-color: #aaffaa; }
.highlight-red { background-color: #ffaaaa; }
.highlight-blue { background-color: #aaaaff; }
.highlight-yellow { background-color: #ffffaa; }

3. 重构jQuery点击事件逻辑 #

把原来只针对绿色按钮的事件，改成统一处理所有颜色按钮，核心是动态获取当前按钮对应的颜色类，给选中文本添加对应样式：

$(document).ready(function() {
  // 统一绑定所有颜色按钮的点击事件
  $('.highlight-btn').click(function() {
    // 获取当前按钮对应的高亮类名
    var targetClass = 'highlight-' + $(this).data('color');
    var selection = window.getSelection();
    
    if (selection.rangeCount > 0) {
      var range = selection.getRangeAt(0);
      var span = document.createElement('span');
      span.className = targetClass;
      // 用新的带颜色类的span包裹选中文本
      range.surroundContents(span);
      selection.removeAllRanges();
    }
  });
});

为啥这样能行？ #

• 用data-color属性统一管理颜色，避免重复写多个独立的点击事件，代码更整洁
• 动态生成对应的高亮类名，点击不同按钮就会给文本加不同的颜色样式
• 保留了你原来用span包裹文本的逻辑，完全不用改核心的高亮实现方式

如果想要支持修改已高亮文本的颜色，还可以加个小逻辑：先检查选中的文本是否已经有高亮类，有的话先移除再添加新类，不过这个是进阶需求，当前方案已经能满足你切换不同颜色高亮的核心需求啦~

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