2

我正在尝试使用单个 CSSclass和 HTML5data-*值创建多个 jquery UI 滑块，但没有成功。我可以得到一些值，但有些根本不起作用。

这是代码：http: //jsfiddle.net/Smartik/FTtAb/1/

如您所见，data-id并且data-val有效，但我无法获得data-min,data-max的值data-step（这已经是最重要的了）。尝试取消注释这些行，看看会发生什么。

所以，我的问题；有没有办法使用data-*或其他方法来获取这些值？

4

2 回答 2

2

您从data-属性中提取的值是字符串，而不是数字。jQuery UI滑块小部件的min、max和step选项只接受数字。

您可以使用parseInt()将这些值转换为数字：

var min   = parseInt(jQuery('#' + id).attr('data-min'), 10);
var max   = parseInt(jQuery('#' + id).attr('data-max'), 10);
var step  = parseInt(jQuery('#' + id).attr('data-step'), 10);

你会在这里找到一个更新的小提琴。

（顺便说一句，考虑将结果缓存jQuery('#' + id)在局部变量中以提高效率）。

于 2013-03-17T10:11:21.100 回答
1

除了 parseInt 您还应该使用该data函数。这是一个修改过的小提琴：

http://jsfiddle.net/FTtAb/3/

jQuery('.sliderui').each(function() {
    var obj = jQuery(this);
    var sId   = "#" + obj.data('id');
    var val   = parseInt(obj.data('val'));
    var min   = parseInt(obj.data('min'));
    var max   = parseInt(obj.data('max'));
    var step  = parseInt(obj.data('step'));


    obj.slider({
        value: val,
        min: min,
        max: max,
        step: step,
        slide: function( event, ui ) {
            jQuery(sId).val( ui.value );
        }
    });
});
于 2013-03-17T10:29:00.557 回答