gpt4 book ai didi

javascript - jquery 选择器提取子元素并附加到另一个元素

转载 作者:太空宇宙 更新时间:2023-11-04 13:08:48 27 4
gpt4 key购买 nike

<分区>

Jquery children selector选择img元素然后提取并移除该元素并将其附加到另一个div元素.....为什么会这样?它不应该是被附加元素的副本吗?

var $anchors = $("#imageGallery a");
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$anchors.click(function(event){
event.preventDefault();
$overlay.show();
var a = $(this).children();
$overlay.append(a);
});

$overlay.click(function(){
$(this).hide();
});
body {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}

ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}

#overlay{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left:0;
background: rgba(0,0,0,0.7);
display: none;
}
<body>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="images/1.png"><img src="images/1.png"></a></li>
<li><a href="images/2.png"><img src="images/2.png"></a></li>
<li><a href="images/3.png"><img src="images/3.png"></a></li>
<li><a href="images/4.png"><img src="images/4.png"></a></li>
<li><a href="images/5.png"><img src="images/5.png"></a></li>
<li><a href="images/6.png"><img src="images/6.png"></a></li>
<li><a href="images/7.png"><img src="images/7.png"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com