响应式页面video元素索引绑定播放触发函数的优化方案咨询

你现有的实现存在两个核心问题：

1. 事件绑定放在resize回调中，每次窗口尺寸变化都会重复给按钮绑定点击事件，最终会出现点击一次触发多次回调的BUG
2. 索引和执行逻辑硬编码在分支判断中，后续新增视频时修改成本高，扩展性差

优化实现 #

第一步：给DOM绑定标识属性

给所有播放按钮统一加类名，同时用data-*自定义属性存储对应的视频索引，不需要靠类名区分：

<button class="video-toggle toggle-1" data-video-index="0">桌面端播放</button>
<button class="video-toggle toggle-2" data-video-index="1">移动端播放</button>

第二步：事件单次绑定，逻辑内聚

不要在resize中绑定事件，所有点击逻辑统一在单次绑定的回调中处理：

// 全局只绑定一次点击事件
$('.video-toggle').on('click', function () {
    const videoIndex = Number($(this).data('video-index'));
    const winWidth = $(window).width();
    // 通用播放逻辑所有场景都执行
    playPause(videoIndex);
    // 根据视口尺寸执行对应额外逻辑
    if (winWidth > 768 && videoIndex === 0) {
        anotherFun(videoIndex);
    } else if (winWidth <= 768 && videoIndex === 1) {
        evenMoreFun(videoIndex);
    }
});

可选：用配置表做扩展性优化

如果后续有新增更多视频的需求，可以把规则抽为配置表，无需修改核心逻辑：

// 视频规则配置，新增视频只需加对应配置项
const VIDEO_RULES = [
    {
        index: 0,
        viewportMatch: w => w > 768,
        extraHandlers: [anotherFun]
    },
    {
        index: 1,
        viewportMatch: w => w <= 768,
        extraHandlers: [evenMoreFun]
    }
];

$('.video-toggle').on('click', function () {
    const index = Number($(this).data('video-index'));
    const winWidth = $(window).width();
    const rule = VIDEO_RULES.find(item => item.index === index);
    if (!rule) return;
    playPause(index);
    // 匹配视口规则时执行所有额外方法
    if (rule.viewportMatch(winWidth)) {
        rule.extraHandlers.forEach(handler => handler(index));
    }
});

配套CSS优化

如果只是需要根据视口控制按钮显隐，完全用CSS媒体查询实现即可，不需要JS参与，减少逻辑复杂度：

@media (max-width: 768px) {
    .toggle-1 { display: none; }
}
@media (min-width: 769px) {
    .toggle-2 { display: none; }
}

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