如何在js中创建2个按钮播放，暂停

Posted 2023-05-08

【中文标题】如何在js中创建2个按钮播放，暂停

【英文标题】：How to create 2 buttons Play , pause in js

【发布时间】：2021-10-20 21:55:31

【问题描述】：

我在卡片中有 2 个按钮，如下所示。

<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause"> PAuse </button>
</div>

当我按下PLay 按钮时，Pause 应该被启用。 Play 按钮应该被禁用。

按下Play后，如果我按下Pause按钮，Play按钮应该是Enabled和Pause按钮应该是disabled。

一件事，我们不能直接按Pause按钮，而不按Play按钮。

如何编写代码以在 JS 中显示条件 Play 和 Pause。

有人可以帮忙吗？

谢谢

【参考方案1】：

嗯，这里是原版 javascript 版本。

html：

<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause"> Pause </button>
</div>

Javascript：

const playButton = document.querySelector('.play');
const pauseButton = document.querySelector('.pause');

// By default make pause button disabled
pauseButton.disabled = true;


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


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

这会起作用。

这里是codepen

【参考方案2】：

默认为.pause 按钮设置disabled="true" 并继续为两个按钮设置click 事件

$(".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>
<div class = "card">
   <button class ="play"> Play </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>
<div class = "card">
   <button class ="play"> Play </button>
   <button class ="pause"> PAuse </button>
</div>

【参考方案3】：

考虑以下内容。

$(function() 
  $(".btn").click(function(e) 
    if ($(this).hasClass("play")) 
      $(this).toggleClass("play pause").html("⏸ Pause");
      // Trigger Play event
     else 
      $(this).toggleClass("play pause").html("⏵ Play");
      // Trigger Pause Event
    
  );
);

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

这会保留一个按钮，但会根据需要更改按钮的类和内容。

符号参考：http://www.scrollseek.com/wd/html_symbols_complete.html