Make a div childrens appear one by one_问答_开发者

开发者 https://www.devze.com 2023-02-12 13:33 出处：网络

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

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/