Question

我正在尝试使用jquery创建一个基本的图像分发器。

我做了什么：当我点击一个空图像时，它会被加载并显示出来。 Demo

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

[edit]我希望每次点击<body>时，逐个填充.pile div中的每个图像src。

我知道我需要使用一个循环或类似的东西，但我并不真的很舒服。谢谢你的帮助。

我的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>

Answer 1

你在谈论这样的事情吗？：

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

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

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

});

演示： http://jsfiddle.net/xmQbq/1/

Answer 2

我不太确定这是你的意思，但这里的代码是每次点击页面时每个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>标记中，其ID为堆。

请注意，我将原始代码包装在$(document).ready(function(){ .... });中。你可能在本地进行测试并没有注意到，但没有那个我添加你的页面有时只会工作。

让div儿童一个接一个地出现

2 个答案: