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

Question

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

切换按钮可以正常工作，但是一旦按钮不再切换，该按钮的CSS状态就不会采用其初始状态。

这是我的Codepen的链接：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;
}

Answer 2

您没有删除旧类，所以而不是
$("#toggle").addClass('fa fa-toggle-off');
做：
$("#toggle").toggleClass('fa fa-toggle-on').toggleClass('fa fa-toggle-off');

Answer 3

您没有在第一次单击中删除已经添加的旧类。

function clickIt(){
  clicked ++
  $(".listOff").toggle();  
  $("#toggle").toggleClass('fa fa-toggle-on').toggleClass('fa fa-toggle-off')
  $("#toggleText").html(clicked % 2 === 1 ? 'Online streamer' : 'All streamer');
};