jQuery按钮类切换求助：点击切换选中/未选中状态

看起来你现在的问题根源在于用两个独立的DOM元素来表示两种状态，而不是给同一个元素切换CSS类——这也是为什么你没法用类切换功能的原因！我来帮你重构代码，用更合理的方式实现点击切换：

首先，我们把重复的DOM结构合并成一个容器，用CSS类来定义「未选中」和「选中」两种状态，这样只需要在点击时切换类即可：

重构后的CSS #

/* 基础样式（未选中状态） */
.button-container {
  padding: 8px 8px;
  border: solid 1px;
  display: inline-block;
  cursor: pointer; /* 加上鼠标指针，提示可点击 */
}

.star-icon {
  background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
  width: 14px;
  height: 14px;
  display: inline-block;
}

.button-text {
  font-family: sans-serif;
  font-size: 16px;
  font-weight: light;
  display: inline;
}

/* 选中状态的样式，通过类叠加实现 */
.button-container.active {
  background: #006DEF;
  border-color: #006DEF; /* 可选：选中时去掉边框或者改成同背景色 */
}

.button-container.active .star-icon {
  background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
}

.button-container.active .button-text {
  color: white;
}

重构后的HTML #

<div class="button-container">
  <div class="star-icon"></div>
  <h1 class="button-text">Link</h1>
</div>

实现点击切换的JS（jQuery版本） #

$(document).ready(function() {
  $('.button-container').click(function() {
    $(this).toggleClass('active'); // 核心：切换active类
  });
});

为什么这是最优方法？ #

• DOM结构更简洁：不需要重复两个几乎一样的容器，只维护一个元素即可
• CSS更易维护：基础样式和状态样式分离，后续修改状态样式只需要调整.active相关的规则
• JS逻辑极简：一行toggleClass就完成了状态切换，避免了复杂的元素显示/隐藏操作

如果你想用原生JS实现，代码也很简单：

document.addEventListener('DOMContentLoaded', function() {
  const button = document.querySelector('.button-container');
  button.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

这样点击按钮就能完美在「未选中（带边框、空心星）」和「选中（蓝色背景、实心星、白色文字）」两种状态之间切换啦！

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