Make a div childrens appear one by one
I am trying to make a basic image distributor using jquery.
What I have done: When I click on an empty image, it is loaded and displayed. Demo
$(".pic").click(function() {
var src = $(this).attr('rel');
$(this).attr('src', src);
});
[edit] I want to fill every image src in the the .pile div, one by one, each time I click on the <body>.
I know I need to use a loop or something like that but I am not really confortable with that. Thank you for any help.
My HTML content:
<div class="pile">
<img class="pic" rel=开发者_如何学Go"3.jpg" src=""/>
<img class="pic" rel="2.jpg" src=""/>
<img class="pic" rel="1.jpg" src=""/>
</div>
I'm not quite sure this is what you meant but here is the code to have each img appear one at a time whenever the page is clicked.
var $currentImg;
$(document).ready(function() {
$currentImg = $('#pile img:first'); //get the first img from the pile div
$("html").click(function() {
var src = $currentImg.attr('rel');
$currentImg.attr('src', src);
$currentImg = $currentImg.next();
});
});
This assumes the images you want are in the <div> tag with the id of pile.
Note that I wrapped your original code inside of $(document).ready(function(){ .... });. You were probably testing this locally and didn't notice, but without that thing I added your page would only sometimes work.
Are you talking about something like this?:
$(".pile").click(function() {
var target = $(this).find("img[src='']").first();
var src = target.attr('rel');
target.attr('src', src);
});
Demo: http://jsfiddle.net/xmQbq/1/
加载中,请稍侯......
精彩评论