使用jQuery评估div上的数据属性并将值传递给函数 [英] Evaluate a data-attibute on a div with jQuery and pass the value into a function

问题描述

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

I have multiple slideshow blocks with preview images (for jQuery Cycle, each slideshow instance with a different delay in milliseconds) like this:

<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将这些变化的延迟值(通过data-attribute设置)传递给将运行Cycle的所有事件的函数.

I want to use jQuery to pass these varying delay values (set via data-attribute)into the function that will run all occurences of 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函数?

How does one evaluate the data-attribute on the div - data-delay="-2000" - and passes it into the Cycle function?

非常感谢！

推荐答案

jQuery具有 .data ()用于html5数据属性的方法.

jQuery has the .data() method which works with the html5 data attributes.

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

编辑

我错过了延迟键，但这有效. FIDDLE

I missed the delay key, but this works. FIDDLE

这篇关于使用jQuery评估div上的数据属性并将值传递给函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！