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) 的结果缓存在局部变量中以提高效率)。