如何优化jQuery点击按钮切换图片及按钮样式状态的冗余代码

优化后的实现方案 #

你原代码的主要问题是存在大量重复逻辑，相同的DOM操作在if和else分支里重复写了两次，我们可以把公共逻辑抽出来，只保留差异化的状态判断部分，同时减少重复的DOM查询提升性能。

优化后的代码如下：

$(document).ready(function() {
    // 提前缓存DOM节点，避免每次点击重复查询
    const $btns = $('.btn');
    const $imgs = $('.img');

    $btns.on("click", function() {
        const $currentBtn = $(this);
        const isPlaying = $currentBtn.hasClass("playing");
        const btnIndex = $currentBtn.data("index");

        // 公共逻辑：重置所有按钮状态
        $btns.text("Play Animation").removeClass("btn_state_active playing");

        // 公共逻辑：更新所有图片src
        $imgs.each((_, img) => {
            const $img = $(img);
            const imgIndex = $img.data("index");
            // 只有当前按钮未激活时才给对应图片用b后缀，否则全用a后缀
            const suffix = (!isPlaying && btnIndex === imgIndex) ? "b" : "a";
            $img.attr("src", `image-${imgIndex}-${suffix}.gif`);
        });

        // 差异化处理：如果当前按钮之前未激活，就更新为激活状态
        if (!isPlaying) {
            $currentBtn.text("Stop Animation").addClass("btn_state_active playing");
        }
    });
});

优化点说明 #

• 提前缓存了按钮和图片的jQuery对象，避免每次点击事件触发时都重新遍历整个DOM查询节点，执行效率更高
• 去掉了重复的重置按钮、遍历图片的逻辑，把公共部分统一放到分支外执行，代码量减少近一半，后续维护只需要修改一处公共逻辑即可
• 简化了后缀判断逻辑，合并成一行三元表达式即可处理两种场景
• 链式调用jQuery方法，减少重复的选择器书写，代码更简洁

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