JS实现卡片内play、pause、delete按钮状态联动异常问题求助

问题根因 #

你代码中修改按钮状态时直接使用了全局类选择器（比如$('.pause')），会匹配页面内所有符合类名的按钮，状态修改会作用到全部卡片，才会出现跨卡片生效的问题。

解决方案 #

每次触发点击事件时，先定位到当前操作的卡片容器，所有状态修改都限定在该容器内执行即可：

1. 通过closest()方法从当前点击的按钮向上查找所属的卡片节点（这里假设你的卡片类名为card，如果实际类名不同替换即可）
2. 用find()方法仅查询当前卡片内的目标按钮，再修改状态

代码示例

// play按钮点击逻辑
$('.play').on('click', function() {
  // 定位当前操作的卡片
  const $currentCard = $(this).closest('.card');
  // 仅修改当前卡片内的按钮状态
  $currentCard.find('.play').prop('disabled', true);
  $currentCard.find('.delete').prop('disabled', true);
  $currentCard.find('.pause').prop('disabled', false);
})

// pause按钮点击逻辑
$('.pause').on('click', function() {
  const $currentCard = $(this).closest('.card');
  $currentCard.find('.pause').prop('disabled', true);
  $currentCard.find('.play').prop('disabled', false);
  $currentCard.find('.delete').prop('disabled', false);
})

如果你的卡片是动态渲染生成的，建议用事件委托绑定事件，避免新增卡片无法触发点击逻辑：

// 事件委托写法，适配动态卡片
$(document).on('click', '.play', function() {
  const $currentCard = $(this).closest('.card');
  // 后续逻辑和上面一致
})

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