jquery在重复点击图像后移除元素

Question

这已经打破了我

我的代码按预期工作，其中用户单击图像，其他图像更改源并成为URL链接。共有6张图片，每张图片在点击后都有自己的替代图片/url。

我的代码集中在第一个和第二个图像

用户将单击第一张图像，图像将淡出和进入。一个图像成为重置图标，它将图像恢复到开始时的状态。但是如果用户重复这个过程，重置图标背后的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>

Answer 1

答案在.unwrap元素中。当使用.unwrap而括号中没有值时，jquery会从函数中指定的元素中移除父元素。此函数的每次迭代都将删除您在函数中选择的元素的进一步父元素。如果你有你想要打开3div,需要三个调用.unwrap()将你的网站的外观。

为了避免这种情况，你需要指定你想要展开的元素，就像你指定你想要围绕你的目标元素进行换行一样。

使用:

.unwrap(["your element"])