数组中项目的 jQuery Grab 属性

Question

我有一组通过 php 动态创建的 div，div 有一个名为“data-image-url”的属性，它保存弹出式画廊的图像 url。当我单击该 div 时，会弹出一个叠加层以及该 div 的 3 张图片库(类似于灯箱)。

我已经创建了叠加层和 div 来包含相关的图库图像(永远只有 3 个)。但是，我不知道如何从属性“data-image-url”中获取值并将其作为 div 的背景图像。

这是我目前的工作，输出的php为html如下:

<div id="overlay"></div>

<div class="blank christmas">
    <div data-image-url="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" class="gallery">
        <img src="img/grey.png" class="lazy" data-original="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas-135x190.jpg" alt="" />
    </div>
 </div>

<div class="blank christmas">
    <div data-image-url="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Joy.jpg" class="gallery">
        <img src="img/grey.png" class="lazy" data-original="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Joy-135x190.jpg" alt="" />
    </div>
 </div>

如您所见，data-image-url 是我要在此处获取的内容，用作弹出窗口中我的 div 的背景图像。

到目前为止，这是我的 jQuery:

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div>');
});

$main_img_url = $('.gallery').attr('data-image-url').html();
$('.main_image').css("background-image", $main_img_url);

还有一个 JsFiddle 来展示我的工作:http://jsfiddle.net/9d9sz/1/

我认为问题是输出的 html 有几个“data-image-url”属性(因为有几个图像)，但我不知道如何针对我点击的图像定位特定的一个。

Answer 1

尝试使用

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div>');
    $main_img_url = $(this).attr('data-image-url');
    $('.main_image').css("background-image", "url('" + $main_img_url + "')")
});

DEMO http://jsfiddle.net/9d9sz/2/