如何使用JavaScript实现卡片内播放（Play）与暂停（Pause）按钮的交互控制逻辑

我来帮你搞定这个播放暂停按钮的状态控制逻辑，其实很直观，分几步就能实现：

第一步：修正初始HTML结构 #

首先我们要把初始状态的Pause按钮设为禁用，直接在HTML里给它加上disabled属性就行：

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

第二步：编写JavaScript逻辑 #

接下来我们用JavaScript给两个按钮绑定点击事件，控制它们的禁用/启用状态：

// 获取页面上的两个按钮元素
const playBtn = document.querySelector('.play');
const pauseBtn = document.querySelector('.pause');

// 监听Play按钮的点击事件
playBtn.addEventListener('click', () => {
  playBtn.disabled = true; // 点击后禁用Play按钮
  pauseBtn.disabled = false; // 同时启用Pause按钮
});

// 监听Pause按钮的点击事件
pauseBtn.addEventListener('click', () => {
  pauseBtn.disabled = true; // 点击后禁用Pause按钮
  playBtn.disabled = false; // 同时启用Play按钮
});

逻辑说明 #

• 初始状态：通过HTML的disabled属性让Pause按钮默认不可点击，完全符合你的需求3；
• 点击Play按钮：触发事件后切换两个按钮的状态，Play变禁用、Pause变可用，满足需求1；
• 点击Pause按钮：反向切换状态，Pause变禁用、Play恢复可用，满足需求2。

这种写法简单直接，逻辑清晰，后续如果要扩展功能（比如加上播放动画之类的）也很容易修改~

内容的提问来源于stack exchange，提问作者Dar