jQuery实现图片点击切换后重复操作元素消失问题求助

原有功能预期为点击6张图片中的任意一张后，其余图片更换src资源、包裹跳转URL，同时出现重置图标，点击重置可恢复所有图片初始状态。目前已完成前两张图片的交互开发，但存在以下问题：

• 重复执行点击流程时，重置逻辑会错误移除元素，破坏页面结构
• 首次点击后图片会被额外添加无用的style属性

1. 重置点击事件重复绑定：每次点击图片生成重置按钮时都会新增一次重置事件绑定，多次触发后逻辑重复执行，导致元素异常
2. 嵌套fade回调时序混乱，不同元素的状态修改不同步，容易出现DOM操作冲突
3. 重置时没有判断元素是否被a标签包裹，对未包裹的元素执行unwrap会导致元素被错误移除
4. 第二张图片的点击逻辑中存在语法错误，wrap参数缺失a标签声明，生成无效DOM结构
5. 手动给img元素重复添加grid-item的style属性，属于冗余操作，和外层div的类名功能冲突
6. 初始绑定的点击事件只针对初始ID的元素，修改元素ID后原有绑定失效，后续点击不会触发预期逻辑

HTML #

和原有代码一致，无需修改：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
    <div class="grid">
        <div class="grid-item" ID="GSH"><img src="https://picsum.photos/100/200" ID="SHI" class="SHC" alt="some text" width="300" height="50"></div>
        <div class="grid-item" ID="GBP"><img src="https://picsum.photos/100/200" ID="BPI" class="BPC" alt="some text" width="300" height="50"></div>
        <div class="grid-item" ID="GTH"><img src="https://picsum.photos/100/200" ID="THI" class="THC" alt="some text" width="300" height="50"></div>
        <div class="grid-item" ID="GEM"><img src="https://picsum.photos/100/200" ID="EMI" class="EMC" alt="some text" width="300" height="50"></div>
        <div class="grid-item" ID="GET"><img src="https://picsum.photos/100/200" ID="ETI" class="ETC" alt="some text" width="300" height="50"></div>
        <div class="grid-item" ID="GJM"><img src="https://picsum.photos/100/200" ID="JMI" class="JMC" alt="some text" width="300" height="50"></div>
    </div>
</section>

CSS #

修复了长度单位缺失、属性误用的问题：

.section {
    margin-bottom: 2%;
}
.grid {
    display: grid;
    grid-template-columns: repeat(3, 300px);  /* 3 columns */
    grid-template-rows: repeat(2, 50px); /* 2 rows  */
    grid-gap: 50px 50px;
    justify-content: center;
    margin-top: 1%;
    border-bottom: 2px solid #02AB9D;
}
.grid-item{
    width: 200px;
    height: 50px;
    display: flex;
    align-items: flex-end;
}
.grid-item img {
    max-width: 100%;
    height: auto;
}

JS #

优化了事件绑定、逻辑复用、错误修复：

$(document).ready(function(){
    // 单独封装重置逻辑，避免重复绑定
    function resetAllImgs() {
        $("#IMI").fadeOut(200, function() {
            if($(this).parent().is("a")) $(this).unwrap();
            $(this).attr('src',"https://picsum.photos/100/200").attr("id","SHI").fadeIn(300);
        });
        $("#img6").fadeOut(200, function() {
            if($(this).parent().is("a")) $(this).unwrap();
            $(this).attr('src',"https://picsum.photos/100/200").attr("id","BPI").fadeIn(300);
        });
        $("#img7").fadeOut(200, function() {
            if($(this).parent().is("a")) $(this).unwrap();
            $(this).attr('src',"https://picsum.photos/100/200").attr("id","THI").fadeIn(300);
        });
        $("#EXI").fadeOut(200, function() {
            if($(this).parent().is("a")) $(this).unwrap();
            $(this).attr('src',"https://picsum.photos/100/200").attr("id","EMI").fadeIn(300);
            // 解绑重置事件，避免重复绑定
            $(this).off("click", resetAllImgs);
        });
    }

    // 第一张图片点击逻辑，用事件委托适配ID变化
    $(document).on("click", "#SHI", function() {
        // 避免动画叠加
        if($(":animated").length) return;
        $("#SHI").fadeOut(200, function() {
            $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","IMI").fadeIn(200);
            $("#BPI").fadeOut(200, function() {
                $(this).wrap("<a href='https://www.random.org/p'>").attr('src', "https://picsum.photos/100/200").attr("id","img6").fadeIn(200);
                $("#THI").fadeOut(200, function() {
                    $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","img7").fadeIn(200);
                    $("#EMI").fadeOut(200, function() {
                        $(this).attr('src', "https://i.picsum.photos/id/181/1920/1189.jpg?hmac=s_EdeBmW8NMdklpios9-zKgZP8bt2_OZ8djbmrPGpYE").attr("id","EXI").fadeIn(300);
                        // 仅绑定一次重置事件
                        $(this).off("click", resetAllImgs).on("click", resetAllImgs);
                    });
                });
            });
        });
    });

    // 第二张图片点击逻辑
    $(document).on("click", "#BPI", function() {
        if($(":animated").length) return;
        $("#SHI").fadeOut(200, function() {
            $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","IMI").fadeIn(200);
            $("#BPI").fadeOut(200, function() {
                // 修复a标签语法错误
                $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","img6").fadeIn(200);
                $("#THI").fadeOut(200, function() {
                    $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","img7").fadeIn(200);
                    $("#EMI").fadeOut(200, function() {
                        $(this).attr('src', "https://i.picsum.photos/id/181/1920/1189.jpg?hmac=s_EdeBmW8NMdklpios9-zKgZP8bt2_OZ8djbmrPGpYE").attr("id","EXI").fadeIn(300);
                        $(this).off("click", resetAllImgs).on("click", resetAllImgs);
                    });
                });
            });
        });
    });
});

• 移除了所有冗余的style属性赋值操作，避免不必要的样式覆盖
• 增加了动画执行判断，避免用户快速点击导致的动画叠加逻辑混乱
• 每次绑定重置事件前先解绑原有事件，避免事件重复绑定触发多次逻辑
• 执行unwrap前先判断父元素是否为a标签，避免错误移除元素
• 修复了第二张图片点击逻辑中的a标签语法错误
• 采用事件委托绑定图片点击事件，不会因为元素ID修改导致绑定失效

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