jquery - 使用 jQuery 评估 div 上的数据属性并将值传递给函数

Question

我有多个带有预览图像的幻灯片块（对于 jQuery Cycle，每个幻灯片实例都有不同的延迟（以毫秒为单位）），如下所示：

<div class="content">
    <div class="slideshow preview" data-delay="-2000">
        <img src="media/prevslide_3.jpg" alt="Img 1" />
        <img src="media/prevslide_4.jpg" alt="Img 2" />
        <img src="media/prevslide_5.jpg" alt="Img 3" />
    </div>
</div>

我想使用 jQuery 将这些不同的延迟值（通过数据属性设置）传递到将运行所有 Cycle 事件的函数中。

$(document).ready(function() {

$('.slideshow.preview').cycle({
    fx: 'scrollHorz',
    random: 1,
    speed: 300,
    timeout: 6000,
    // here, for a single slideshow, delay is set like this "delay: -1234"
});
});

如何评估 div 上的数据属性 - data-delay="-2000" - 并将其传递给 Cycle 函数？

提前谢谢了！

Answer 1

jQuery 的.data()方法适用于 html5 数据属性。

$(document).ready(function() {
    $('.slideshow.preview').cycle({
        fx: 'scrollHorz',
        random: 1,
        speed: 300,
        timeout: 6000,
        delay: $(".slideshow.preview").data("delay")
    });
});

编辑

我错过了延迟键，但这有效。 小提琴