如何实现点击按钮时仅切换当前选中按钮的内部文本颜色

问题原因 #

• 原代码第二个事件绑定逻辑错误：$('.btn-2').addClass('selected')会选中页面所有.btn-2元素添加样式，导致所有按钮文本同时变色
• 重复绑定了.newsbutton的点击事件，冗余且容易产生逻辑冲突

修复方案 #

方案1：保留原类名逻辑，支持多选（点击按钮切换自身状态，可同时选中多个） #

直接合并两次点击事件，仅操作当前点击按钮内部的文本元素：

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass("active");
  // 仅选中当前按钮内部的.btn-2元素切换类
  $(this).find('.btn-2').toggleClass('selected');
});

方案2：单选逻辑（同一时间仅能选中一个按钮） #

如果需要实现排他选中，先清空所有按钮的状态再给当前按钮加类：

$(document).on('click', '.newsbutton', function() {
  // 清空所有按钮的选中状态
  $('.newsbutton').removeClass('active');
  $('.btn-2').removeClass('selected');
  // 给当前点击的按钮设置选中状态
  $(this).addClass("active");
  $(this).find('.btn-2').addClass('selected');
});

优化方案（推荐） #

可以直接通过CSS后代选择器绑定文本样式，无需单独操作.btn-2的类，代码更简洁易维护：

修改后CSS：

/* 直接匹配处于激活状态按钮内部的文本元素 */
.newsbutton.active .btn-2 {
  color: #56CCF2;
}

.active {
  background-color: #242424 !important;
}

修改后JS（多选场景）：

$(document).on('click', '.newsbutton', function() {
  $(this).toggleClass("active");
});

修改后JS（单选场景）：

$(document).on('click', '.newsbutton', function() {
  $('.newsbutton').removeClass('active');
  $(this).addClass("active");
});

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