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>
clone()是用于复制任何对象并将其放在某处的函数是 DOM。如果使用 appendTo、prependTo、before 和 after 函数，这种复制和粘贴会更酷。
append() 在所选元素内添加对象。让我们开始最基本的操作，将元素添加为所选元素的最后一个子元素，但您真的知道可以使用此功能在 DOM 中移动或移动一个对象。 p>
所做的更改
var a = $(this).children().clone();
$overlay.empty().append(a);
工作示例
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().clone();
$overlay.empty().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>