让div的children一一出现

发布于 2024-10-17 21:14:05 字数 625 浏览 3 评论 0原文

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

我所做的：当我单击空图像时，它会被加载并显示。演示

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

[编辑] 我想填充 .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>

原文

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="3.jpg" src=""/>
    <img class="pic" rel="2.jpg" src=""/>
    <img class="pic" rel="1.jpg" src=""/>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安穩 2024-10-24 21:14:05

我不太确定这就是你的意思，但这里是每当单击页面时每个图像一次出现一个的代码。

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

这假设您想要的图像位于 ID 为 Pile 的

标记中。

请注意，我将您的原始代码包装在 $(document).ready(function(){ .... }); 中。您可能在本地测试这一点并且没有注意到，但是如果没有我添加的东西，您的页面有时只能工作。

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.

回复收藏 0 原文

当爱已成负担 2024-10-24 21:14:05

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

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

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

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

});

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

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/

回复收藏 0 原文

~没有更多了~