Question

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

切换按钮工作正常，但一旦按钮不再切换，按钮的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

你没有删除旧班，而不是 $("#toggle").addClass('fa fa-toggle-off');
这样做：
$("#toggle").toggleClass('fa fa-toggle-on').toggleClass('fa fa-toggle-off');

Answer 2

确保在切换前删除课程：

// 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 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');
};

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

3 个答案: