jquery在重复图像点击后删除元素答案

【问题标题】：jquery is removing elements after repeated image clickjquery在重复图像点击后删除元素
【发布时间】：2021-11-25 01:57:45
【问题描述】：

这让我崩溃了

我的代码按预期运行，用户单击图像，其他图像更改源并成为 URL 链接。总共有 6 张图片，每张都有自己的备用图片/网址。

我的代码主要关注第一张和第二张图片

用户将点击第一张图片，然后图片淡入淡出。一张图片变成重置图标，将图片恢复到它们开始时的样子。但是如果用户重复这个过程，重置图标后面有 jquery，这似乎会从他们的容器中删除元素，这会破坏整体页面体验。我可以看到样式 HTML 在初始单击后添加到图像中。

我不知道如何阻止元素消失，从而保留重要的结构

     $(document).ready(function(){ 
$(function () { //Open function for 1st Logo
  $("#SHI").click (function() { //Click starts Logo change
    $("#SHI").fadeOut(200, function() { //Fades out Logo
      $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","IMI").attr("style","grid-item").fadeIn(200)//Swap Logo image, ID and adds URL
      $("#BPI").fadeOut(200, function() { //Fades out Logo
        $(this).wrap("<a href='https://www.random.org/p'>").attr('src', "https://picsum.photos/100/200").attr("id","img6").attr("style","grid-item").fadeIn(200) //Swap Logo image, ID and adds URL
        $("#THI").fadeOut(200, function() { //Fades out Logo
          $(this).wrap("<a href='https://www.random.org/'>").attr('src', "https://picsum.photos/100/200").attr("id","img7").attr("style","grid-item").fadeIn(200)//Swap Logo, ID and adds URL
          $("#EMI").fadeOut(200, function() { //Fade Out Last Icon for Logo set
            $(this).attr('src', "https://i.picsum.photos/id/181/1920/1189.jpg?hmac=s_EdeBmW8NMdklpios9-zKgZP8bt2_OZ8djbmrPGpYE").attr("id","EXI").attr("style","grid-item").fadeIn(300).click(function() {//Fades in "reset" icon, add click.
              $("#IMI").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","SHI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              $("#img6").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","BPI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              $("#img7").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","THI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              $("#EXI").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","EMI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
             }); //Closes "reset"
            }); //Closes fade
         }) //Closes fade 
        }); //Closes fade
      }); //Closes fade
    }); //Closes click function
});//Closes Logo change


$(function() { //Open function for 2nd Logo
  $("#BPI").click(function() { //Click starts Logo change
    $("#SHI").fadeOut(200, function() { //Fades out Logo
      $(this).attr('src', "https://picsum.photos/100/200").attr("id","IMI").attr("style","grid-item").fadeIn(200).wrap("<a href='https://www.random.org/'>") //Swap Logo image, ID and adds URL
      $("#BPI").fadeOut(200, function() { //Fades out Logo
        $(this).attr('src', "https://picsum.photos/100/200").attr("id","img6").attr("style","grid-item").fadeIn(200).wrap("<https://www.random.org/'>") //Swap Logo image, ID and adds URL
        $("#THI").fadeOut(200, function() { //Fades out Logo
          $(this).attr('src', "https://picsum.photos/100/200").attr("id","img7").attr("style","grid-item").fadeIn(200).wrap("<https://www.random.org/'>")//Swap Logo, ID and adds URL
          $("#EMI").fadeOut(200, function() { //Fade Out Last Icon for Brand Support Logo set
            $(this).attr('src', "https://i.picsum.photos/id/181/1920/1189.jpg?hmac=s_EdeBmW8NMdklpios9-zKgZP8bt2_OZ8djbmrPGpYE").attr("id","EXI").attr("style","grid-item").fadeIn(300).click(function() {//Fades in "reset" icon, add click.
              $("#IMI").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","SHI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              $("#img6").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","BPI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              $("#img7").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","THI").attr("style","grid-item").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              $("#EXI").fadeOut(200, function() {$(this).attr('src',"https://picsum.photos/100/200").attr("id","EMI").fadeIn(300).unwrap()});//Fades out support icon, resets ID and removes URL
              }); //Closes "reset"
            }); //Closes img3 fade
          }) //Closes img2 fade 
        }); //Closes img1 fade
      }); //Closes img fade
    }); //Closes click function
}); //Closes Logo change

});

.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; /* 50 pixels of space added between rows and 100 pixels added between columns  */
    justify-content: center;
    margin-top: 1%;
    border-bottom: #02AB9D;
    border-bottom-width: 2px;
}
.grid-item{
    width: 200;
    height: 50;
    justify-content: bottom;
}

<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>

【问题讨论】：

欢迎来到 Stack Overflow。从您的描述或代码中不清楚您要完成什么。我看到很多可以优化的地方，但我不确定你想要什么，所以我不知道如何建议。
您好，谢谢。最终结果应该是用户拥有六个独特的图像（或品牌徽标）。对于他们单击的每个徽标，所有其他徽标都会淡出，新徽标将淡入。一个图标用于手册，另一个用于常见问题解答部分等。这些图标中的每一个都成为另一个页面的可点击链接。但是，为了方便用户，如果用户不小心选择了错误的品牌，我希望其中一个图标充当后退按钮。正是这个后退图标导致了问题。如果我选择一个品牌，然后按后退图标，然后选择一个品牌并再次点击后退图标，网格元素就会消失。

标签： javascript html jquery dom

【解决方案1】：

答案在 .unwrap 元素中。当您使用括号中没有值的 .unwrap 时，jquery 会从函数中指定的元素中删除父元素。此函数的每次迭代都将删除您在函数中选择的元素的更多父元素。因此，如果您想用 3 个 div 展开某些内容，则需要调用 3 次 .unwrap() 来破坏您网站的外观。

为避免这种情况，您需要指定要展开的元素，方法与指定要环绕目标元素的内容相同。

用途：

.unwrap(["your element"])

【讨论】：