Javascript 隐藏第二个播放/暂停按钮

我正在为滑块制作播放/暂停按钮。我有它的工作，它是完美的。几乎。我有一个小问题（我确信有一个快速解决方案），那就是我只想显示一个播放/暂停图像，当点击时它会切换类

我的图像工作，但由于我创建了两个类播放和暂停，我有两个图像显示在我的滑块旁边，具有相同的功能！如何隐藏（删除）第二个图像，同时保留第二个图像的功能？我不能从我的HTML中删除第二个

ul

类，因为我正在为它分配属性，但我无法确定如何不让它显示出来。我尝试过在线搜索，但没有一个解决方案能解决我的具体问题

代码如下：

$（“#自动控制”）。在（“单击“，”.bx开始”，函数（）上{
警报（“启动！”）；
主滑块。startAuto（）；
});
$（“#自动控制”）。在（“单击”上，“.bx停止”，函数（）{
警报（“停止！”）；
主滑动条.stopAuto（）；
});
$（'#autocontrols ul'）。绑定（“单击”，函数（）{
if（$（this.attr（“类”）==“bx开始”）
$（this.attr（“类”，“bx停止”）；
其他的
$（this.attr（“类”，“bx开始”）；
});
/*自动启动按钮*/
ul.bx-start{
背景：图像url（“pause.png”）不重复0；
高度：50px；
}
/*自动停止按钮*/
ul.bx-stop{
背景：图像url（“play.png”）不重复0；
高度：50px；
}





此示例将切换元素的可见性。将
.bx stop
的初始显示属性设置为
none

CSS:

HTML:


首先

标签并非用作按钮，而是包含
列表元素

所以你需要的是这样的东西：

<span class="control start"></span>

您所需要的功能变得非常简单：

$('.control').click(function(){

  // First toggle the class
  $(this).toggleClass('start stop');

  // now booleanize the current class
  var isPlay = $(this).hasClass('start');

  if(isPlay){
     // do something like: main_slider.startAuto();
  }else{
     // do something like: main_slider.stopAuto();
  }

}); 

上面的代码非常灵活，您甚至可以在文档加载时启动自动播放，例如：

<span class="control stop"></span> <!-- autoplaying so we need a stop class -->



即使在特定的情况下，上述所有功能也会起作用。
您可以发布小提琴吗？谢谢，但它只在第一次单击时起作用。第一次单击后，两个元素都会完全消失（无法控制滑块！）。如何使其在每次单击时都有效？问题是，使用此解决方案时，单击任何内容都不会显示两个图像。第一次单击后，一个图像消失。第二次单击后，这两个选项都将消失！：（用上面更新的示例替换您的完整示例，没有理由认为此代码不起作用。非常感谢！但最后一个问题是：使用上面的示例，播放/暂停按钮现在并排出现。我希望它们看起来是同一个按钮！现在，单击“播放”使其消失，但“暂停”按钮总是在它的右边，而且永远不会消失。所以我最初的问题仍然存在。这两个按钮仍然并排。只有一个按钮在单击时消失，另一个按钮始终存在。@user3694391您是否单击了我随示例提供的
jsBin
链接？我真的想在这里提供有用的建议。不要使用UL，不要使用两个元素。如果你仔细看一下上面答案中的内容，你就会明白重点。这里有你需要的所有代码，甚至更多。再次感谢！我遗漏了一件小事。它现在可以工作了！轻微警告：使用span而不是UL将我的播放/暂停按钮放错了位置。它现在与滑块元素不一致我有。它现在完全可以工作了！（除了自动播放部分，我正在努力解决）。
<span class="control start"></span>

/* auto buttons */
.control{
  display:inline-block;
  width:50px;
  height:50px;
}
.start { background: url("play.png") no-repeat 0 0;}
.stop  { background: url("stop.png") no-repeat 0 0;}

$('.control').click(function(){

  // First toggle the class
  $(this).toggleClass('start stop');

  // now booleanize the current class
  var isPlay = $(this).hasClass('start');

  if(isPlay){
     // do something like: main_slider.startAuto();
  }else{
     // do something like: main_slider.stopAuto();
  }

}); 

<span class="control stop"></span> <!-- autoplaying so we need a stop class -->