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”属性（因为有几个图像），但我不知道如何针对我点击的图像定位特定的。 / p>

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/

数组中项的jQuery Grab属性

1 个答案: