javascript - 切换按钮不会返回到初始状态 - Javascript

Question

我创建了一个连接到 Twitch API 的快速 Twitch 查看器。我放置了一个切换按钮以仅从列表中过滤在线流媒体。

切换按钮工作正常，但是一旦按钮不再切换，按钮的 css 状态就不会采用它的初始状态。

这是我的代码笔的链接:https://codepen.io/nico3d911/pen/xYOJva

下面是用于按钮的 JavaScript 代码:

var clicked = 0;
function clickIt(){
  clicked ++

  if (clicked % 2 === 1){
      $(".listOff").hide();
    $("#toggle").addClass('fa fa-toggle-on');
    $("#toggleText").html('Online streamer');
  }
  else {
    $(".listOff").show();
    $("#toggle").addClass('fa fa-toggle-off');
    $("#toggleText").html('All streamer');
    clicked = 0;
  }
};

这是按钮的 CSS:

.fa-toggle-off, .fa-toggle-on{
  background-color: ;
    font-size: 3em;
  border: none;
}

.fa-toggle-on{
  color: #3f8223;
}

感谢您的帮助!

Answer 1

确保在切换之前删除类:

// Remove the classes
$("#toggle").removeClass('fa-toggle-on fa-toggle-off');

// Perform the toggle
if (clicked % 2 === 1){
  $(".listOff").hide();
  $("#toggle").addClass('fa fa-toggle-on');
  $("#toggleText").html('Online streamer');
}
else {
  $(".listOff").show();
  $("#toggle").addClass('fa fa-toggle-off');
  $("#toggleText").html('All streamer');
  clicked = 0;
}