jquery doesn't append element to the page
SOLVED!! css img display:none was in confilct with newly added element. many thanks to everybody.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link type="text/css" href="galerina.css" rel="stylesheet"/>
</head>
<body>
<div class="galerina">
<img class="img1" src="images/1.jpg" alt=""/>
<img class="img2" src="images/2.jpg" alt=""/>
<img class="img3" src="images/3.jpg" alt=""/>
<img class="img4" src="images/4.jpg" alt=""/>
<p/>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="galerina.js"></script>
</body>
</html>
CSS:
div.galerina{
max-width: 500px;
position: relative;
}
div.galerina img{
margin: auto;
display: none;
opacity: 0;
}
div.galerina img.img1{
display: block;
opacity: 1;
}
JS:
$("div.galerina").each(function(){
var gal=$(this);
var size=$(gal).children("img").size();
var i=0;
$(gal).children("img").each(function(){
var img=$(this);
$(gal).append("<img src='images/bullet.png'/>").click(function(){
img.stop().animate({opacity:0},300);
im开发者_JAVA技巧g.css({display:none});
})
})
})
there are no bullets at the page load?? why??
Well, there are many things you can do to make that code better. Avoid caching values you can access directly, as I said in my comment, and learn to use methods like fadeOut() instead of doing all the work yourself.
With a little refactoring along these guidelines (and if I properly understand what you're trying to achieve), your code becomes:
$("div.galerina").each(function() {
$(this).children("img").before("<img src='images/bullet.png'/>")
.click(function() {
$(this).prev().andSelf().fadeOut(300);
});
});
I think you need to do
var img=$(this);
to get the JQuery wrapper so that the parent call works
This should work:
$("div.galerina").each(function(){
var gal=$(this);
var size=gal.children("img").size();
var i=0;
gal.children("img").each(function(){
var img=$(this);
img.parent().append(
'<img src="images/bullet.png" alt="" />').click(
function(){
$(this).stop().animate({opacity:0},300);
$(this).css({"display":"none"});
});
});
});
加载中,请稍侯......
精彩评论