Сделайте так, чтобы div дети появлялись один за другим - PullRequest
Новая
       25

Сделайте так, чтобы div дети появлялись один за другим

1 голос
/ 19 февраля 2011

Я пытаюсь создать базовый распространитель изображений с помощью jquery.

Что я сделал: Когда я нажимаю на пустое изображение, оно загружается и отображается. Демо 

$(".pic").click(function() {
    var src = $(this).attr('rel');
    $(this).attr('src', src);
});

[править] Я хочу заполнить каждое изображение src в div .pile, один за другим, каждый раз, когда я нажимаю <body>.

Я знаю, что мне нужно использовать цикл или что-то в этом роде, но мне это не очень удобно.Спасибо за любую помощь.

Мой HTML контент: 

<div class="pile">
    <img class="pic" rel="3.jpg" src=""/>
    <img class="pic" rel="2.jpg" src=""/>
    <img class="pic" rel="1.jpg" src=""/>
</div>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2011

Я не совсем уверен, что это то, что вы имели в виду, но вот код, чтобы каждый img появлялся по одному при нажатии на страницу. 

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();
    });
});

Предполагается, что нужные изображения находятся в теге <div> с идентификатором стопки.

Обратите внимание, что я завернул ваш оригинальный код в $(document).ready(function(){ .... });. Возможно, вы тестировали это локально и не заметили, но без этого я добавил, что ваша страница будет работать только иногда.

0 голосов
/ 19 февраля 2011

Вы говорите о чем-то подобном ?: 

$(".pile").click(function() {

    var target = $(this).find("img[src='']").first();

    var src = target.attr('rel');
    target.attr('src', src);

});

Демо: http://jsfiddle.net/xmQbq/1/

...