如何在js中創建2個按鈕播放，暫停 -有解無憂

我在卡片上有兩個按鈕，像下面這樣。

<div class = "card"/span>>
   <button class ="play"/span>> 播放</按鈕>
   <button class ="pause">  PAuse </button>
</div>

當我按下PLay按鈕時，Pause應該被啟用。Play按鈕應該被禁用。

在按下Play之后，如果我按下Pause按鈕，Play按鈕應該是Enabled而Pause按鈕應該是disabled。

有一點，我們不能直接按Pause按鈕，而不按Play按鈕。

我怎樣才能寫一段代碼來顯示Play和Pause在JS中的條件。

誰能幫幫我嗎？

謝謝

uj5u.com熱心網友回復：

好吧，這里是vanilla Javascript版本。

Html:

<div class = "card"/span>>
   <button class ="play"/span>> 播放</按鈕>
   <button class ="pause"/span>>  暫停 </按鈕>
</div>

Javascript:

const playButton = document. querySelector（'.play'）。
const pauseButton = document.querySelector('.pause') 。

//默認情況下使暫停按鈕失效。
pauseButton.disabled = true。


playButton.addEventListener('click', () =>  {
  pauseButton.disabled = false。
  playButton.disabled = true;
});


pauseButton.addEventListener('click', () =>  {
  playButton.disabled = false。
  pauseButton.disabled = true;
});

這就可以了。

這里是codepen

uj5u.com熱心網友回復：

默認設定disabled="true"為.pause按鈕，并繼續設定click事件為兩個按鈕

。

$(".play"/span>)。 on("click", function() {
  $(this).prop("disabled", true ) 。
  $(".pause").prop("disabled", false )。
})

$(".pause").on("click", function() {
  $(this).prop("disabled", true ) 。
  $(".play").prop("disabled", false ) 。
})

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class = "card"/span>>
   <button class ="play"/span>> 播放</button>。
   <button class ="pause" disabled ="true">  PAuse </button>
</div>

如果你的DOM上沒有控制器，不能為.pause添加disabled="true"，你可以在定義事件前使用$(".pause").prop("disabled", true )。

。

$(".pause")。 prop("disabled", true )。

$(".play").on（"click", function(){
  $(this).prop("disabled", true ) 。
  $(".pause").prop("disabled", false )。
})

$(".pause").on("click", function() {
  $(this).prop("disabled", true ) 。
  $(".play").prop("disabled", false ) 。
})

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class = "card"/span>>
   <button class ="play"/span>> 播放</button>。
   <button class ="pause">  PAuse </button>
</div>

uj5u.com熱心網友回復：

考慮以下情況。

。

$(function() {
  $(".btn").click(function(e) {
    if ($(this).hasClass("play") {
      $（this）.toggleClass（"play pause"）。 html("&#9208; Pause")。
      // 觸發播放事件。
    } else {
      $(this).toggleClass("play pause") 。 html("&#9205; Play")。
      // 觸發暫停事件。
    }
  });
});

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div class="card">/span>
  <button class="btn play"/span>> &#9205;播放</按鈕> 
</div>

這就保留了一個按鈕，但根據需要改變了按鈕的類別和內容。

符號參考。http://www.scrollseek.com/wd/html_symbols_complete.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319909.html

標籤：

上一篇：值在console.log中總是可見，但有時在輸入欄位中不可見

下一篇：當幻燈片處于活動狀態時，改變標簽的顏色