javascript - 由 HTML5 data-* 和 CSS 类构建的动态 JQuery UI slider

Question

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

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

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

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

Answer 1

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

您可以使用 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);

你会发现一个更新的 fiddle here .

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