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

【问题标题】：How to create 2 buttons Play , pause in js如何在js中创建2个按钮播放，暂停
【发布时间】：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。

有人可以帮忙吗？

谢谢

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案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("&#9208; Pause");
      // Trigger Play event
    } else {
      $(this).toggleClass("play pause").html("&#9205; 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

【讨论】：