由 HTML5 data-* 和 CSS 类构建的动态 JQuery UI 滑块答案

【问题标题】：Dynamic JQuery UI slider constructed from HTML5 data-* and CSS class由 HTML5 data-* 和 CSS 类构建的动态 JQuery UI 滑块
【发布时间】：2013-03-17 09:59:17
【问题描述】：

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

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

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

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

【问题讨论】：

您的示例对我有用：滑块有效，回调也可以更新滑块值...什么不适合您？

标签： javascript jquery html jquery-ui jquery-ui-slider

【解决方案1】：

您从data- 属性中提取的值是字符串，而不是数字。 jQuery UI slider 小部件的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);

你会发现一个更新的小提琴here。

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

【讨论】：

【解决方案2】：

除了 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 );
        }
    });
});

【讨论】：

使用data() 确实可以使它更具可读性。另一方面，您应该始终指定您希望parseInt() 使用的基数，否则您可能会根据data- 属性值得到奇怪的结果甚至错误（例如，042 将被解析为34 而不是42)。
现在看起来很简单。非常感谢您的帮助。