jQuery点击切换元素CSS状态失效求助：两次点击无法恢复初始样式

云原生阿岚

2026-6-21

解决点击元素切换样式失效的问题

你绑定了两个独立的click事件到#green元素，每次点击时这两个事件会依次执行，后一个的样式设置会覆盖前一个，所以永远只会看到最后一个事件的效果，自然无法实现切换。下面是两种可行的解决方案：

方案一：用CSS类切换（推荐）

把样式逻辑抽离到CSS中，通过切换类来实现状态变化，代码更简洁易维护：

CSS 代码

#green {
  background-color: green;
  border: 0;
  /* 可选：添加过渡动画让切换更平滑 */
  transition: all 0.3s ease;
}

#green.active {
  background-color: gray;
  border: 20px solid white;
}

JavaScript 代码

$("#green").click(function() {
  var audio = new Audio('sounds/green.mp3');
  audio.play();
  $(this).toggleClass('active');
});

方案二：通过判断当前样式切换状态

如果不想新增CSS类，可以在点击事件里直接判断元素当前的样式状态，再执行对应的修改：

$("#green").click(function() {
  var audio = new Audio('sounds/green.mp3');
  audio.play();
  var $element = $(this);
  // 注意：不同浏览器返回的颜色格式可能不同，比如rgb(0,128,0)或"green"
  var isOriginalState = $element.css('background-color') === 'green' || $element.css('background-color') === 'rgb(0, 128, 0)';
  
  if (isOriginalState) {
    $element.css({
      'background-color': 'gray',
      'border': '20px solid white'
    });
  } else {
    $element.css({
      'background-color': 'green',
      'border': '0'
    });
  }
});