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/