时间戳

首页 > 解决方案 > 如何在js中创建2个按钮播放，暂停

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

问题描述

我在卡上有 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按钮。

我如何编写代码来显示条件Play和PauseJS。

有人可以帮忙吗？

谢谢

标签： javascriptjqueryjquery-ui

解决方案

默认设置disabled="true"按钮.pause并继续设置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 没有控制权并且无法添加disabled="true"for .pause，则可以$(".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>

推荐阅读