javascript - 如何更改每张幻灯片的数据属性而不将每张幻灯片设置为一个背景？

Question

我正在努力向我的幻灯片添加特定的 data- 属性，以便我可以为每张幻灯片添加自定义背景。我所做的是添加自定义数据属性，然后使用 jQuery 将值分配给变量。之后，我将变量传递给 .css() 并将其分配给 background 属性。

var elementSection = $(".cycle-slideshow section")),
    sectionBackground = elementSection.attr("data-cycle-slide-background");

$(elementSection).css({background: sectionBackground});

<section data-cycle-slide-background="url(images/slides/laptopgreenery.jpg)"></section>
<section data-cycle-slide-background="url(images/slides/slide1bg.jpg)"></section>
<section data-cycle-slide-background="url(images/slides/slide2bg.png) repeat;" data-cycle-hash="2"></section>

但是，这样做会将每张幻灯片的背景设置为属性中的背景，在本例中为“laptopgreenery.jpg”。

Answer 1

您应该循环播放每张幻灯片:

elementSection.each(function() {
    $(this).css('background', $(this).data('cycle-slide-background'));
});

重要提示:请确保数据属性末尾没有 ;，它会使规则无效并且不会应用。

演示:http://jsfiddle.net/vetnLr8n/