隱藏第二個播放/暫停按鈕

Question

我正在為滑塊創建播放/暫停按鈕。 我有它的工作，這是完美的。 幾乎。 我有一個小問題（我敢肯定有一個快速解決方案）是我只想顯示一個播放/暫停圖像，當單擊該圖像時會切換類。

我的圖像可以工作，但是由於我要創建兩個用於播放和暫停的類，因此在滑塊旁邊會顯示兩個具有相同功能的圖像！ 如何在保留第二個功能的同時隱藏（擺脫）第二個圖像？ 因為我正在為其分配屬性，所以不能僅僅從HTML中刪除第二個ul類，但是我無法弄清楚如何使其不顯示。 我嘗試過在線搜索，但是沒有一種解決方案可以解決我的特定問題。

這是代碼：

 $('#autocontrols').on("click", '.bx-start', function() { alert("Starting!"); main_slider.startAuto(); }); $('#autocontrols').on("click", '.bx-stop', function() { alert("Stoping!"); main_slider.stopAuto(); }); $('#autocontrols ul').bind("click", function() { if ($(this).attr("class") == "bx-start") $(this).attr("class", "bx-stop"); else $(this).attr("class", "bx-start"); }); 

 /*auto start button*/ ul.bx-start { background: image-url("pause.png") no-repeat 0 0; height: 50px; } /*auto stop button*/ ul.bx-stop { background: image-url("play.png") no-repeat 0 0; height: 50px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='autocontrols'> <ul class="bx-start"> </ul> <ul class="bx-stop"> </ul> </div> 

Answer 1

本示例將切換元素的可見性。 將.bx-stop的初始顯示屬性設置為none 。

CSS：

.bx-start   { background: url( "play.png" ) no-repeat 0 0; height: 50px; }
.bx-stop    { background: url( "pause.png" ) no-repeat 0 0; height: 50px; display: none; }

HTML：

<div id='autocontrols'>
    <ul class="control bx-start"></ul>
    <ul class="control bx-stop"></ul>
</div>

使用Javascript：

$( '#autocontrols .control' ).on("click", function() {                
    $( '.control' ).hide().not( this ).show();              
});

$( '#autocontrols .bx-start' ).on( "click", function() {
    console.log( "Starting!" );
    main_slider.startAuto();
});

$( '#autocontrols .bx-stop' ).on( "click", function(){
    console.log( "Stoping!" );
    main_slider.stopAuto();
});

Answer 2

jsBin演示

首先
<ul>標記並不旨在用作按鈕 ，而是包含<li>列表元素
所以你需要的是這樣的：

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

與相關的CSS ：

/* 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;}

比您需要的jQuery變得無關緊要：

$('.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();
  }

}); 

上面的代碼非常靈活，您甚至可以通過分配HTML等方式在文檔加載時開始自動播放：

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

以上所有內容即使在該特定情況下也適用。