为Reaper的Web控制器按钮添加点击切换颜色功能求助

核心思路 #

通过给按钮添加/移除CSS类来切换颜色，同时绑定点击事件执行mutetrack函数，无需复杂状态判断，用原生API就能实现。

1. HTML按钮结构 #

给每个静音按钮加上统一类名和存储轨道ID的自定义属性：

<button class="track-mute-btn" data-track-id="1">轨道1 静音</button>
<button class="track-mute-btn" data-track-id="2">轨道2 静音</button>
<button class="track-mute-btn" data-track-id="3">轨道3 静音</button>

2. CSS定义颜色样式 #

设置按钮默认状态和激活状态的颜色（可自行修改颜色值）：

/* 默认状态样式 */
.track-mute-btn {
  background-color: #f0f0f0;
  color: #333;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 点击后的激活状态样式 */
.track-mute-btn.active {
  background-color: #e74c3c; /* 自定义的激活颜色，比如红色 */
  color: #fff;
}

3. JavaScript绑定点击事件 #

用原生JS实现点击切换类+执行静音函数：

// 获取所有静音按钮
const muteButtons = document.querySelectorAll('.track-mute-btn');

// 给每个按钮绑定点击逻辑
muteButtons.forEach(btn => {
  btn.addEventListener('click', () => {
    // 切换active类，自动实现颜色切换
    btn.classList.toggle('active');
    
    // 从自定义属性中获取轨道ID
    const trackId = btn.dataset.trackId;
    
    // 执行你的静音函数
    mutetrack(trackId);
  });
});

关键说明 #

• classList.toggle('active')会自动判断按钮当前状态：如果有active类就移除，没有就添加，无需手动写if-else判断状态
• data-track-id用来存储轨道ID，避免把ID硬编码在函数里，方便批量处理按钮
• 如果需要同步Reaper端的静音状态（比如在DAW里手动改了静音，按钮颜色要同步），可以在初始化时调用Reaper的API获取轨道静音状态，给对应按钮加上/移除active类

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