如何使用同一触发按钮控制音频和视频的播放暂停

该需求完全可以实现，你原有代码失效的核心原因有两点：

• 页面初始化阶段按钮ID为audio_play、audio_pause，此时给#video_play、#video_pause绑定的点击事件找不到对应DOM元素，事件绑定直接失效
• 动态修改元素ID的实现方式兼容性差、维护成本高，属于不必要的操作

实现思路 #

不需要修改按钮ID，直接维护当前激活的标签下标，点击播放/暂停按钮时根据当前激活的标签，控制对应媒体元素即可。额外可以增加切换标签时自动暂停上一个媒体的逻辑，避免音视频同时播放产生冲突。

修改后的代码示例 #

仅需要替换原有jQuery逻辑即可，HTML、CSS部分不需要做任何调整：

$(document).ready(function () {
    // 维护当前激活标签下标
    let currentActiveTab = 0

    // 播放按钮统一逻辑
    $("#audio_play").on("click", function () {
        if(currentActiveTab === 0) {
            $("#audio").get(0).play();
        } else if(currentActiveTab === 1) {
            $("#video").get(0).play();
        }
    })

    // 暂停按钮统一逻辑
    $("#audio_pause").on("click", function () {
        if(currentActiveTab === 0) {
            $("#audio").get(0).pause();
        } else if(currentActiveTab === 1) {
            $("#video").get(0).pause();
        }
    })

    // 标签切换同步逻辑
    $('.menu ul li').on("click", function () {
        currentActiveTab = $(this).index()
        // 切换标签时暂停所有正在播放的媒体，避免冲突
        $("#audio").get(0).pause();
        $("#video").get(0).pause();
    })
})

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