動態JQuery UI滑塊從HTML5數據*和CSS類構造

我試圖創建多個jQuery UI滑塊使用單個CSS class和HTML5 data-*值，但沒有成功。我可以得到一些價值，但有些根本不起作用。動態JQuery UI滑塊從HTML5數據*和CSS類構造

下面是代碼：http://jsfiddle.net/Smartik/FTtAb/1/

正如你所看到的，data-id和data-val作品，但我不能爲data-min，data-max，data-step（這是最重要的話）得到的值。嘗試取消註釋這些行，看看發生了什麼。

所以，我的問題;有沒有辦法使用data-*或其他東西來獲取這些值？

來源

2013-03-17 Andrei Surdu

你的例子是爲我工作：滑塊作品，回調也更新滑塊值...什麼是不適合你的工作？ – sdespont 2013-03-17 10:06:29

除了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-17 10:29:00

使用'data（）'可以使其更具可讀性。另一方面，你應該總是指定你想要'parseInt（）'使用的基數，否則你可能會得到奇怪的結果甚至錯誤，這取決於'data-'屬性值（例如'042'將被解析爲'34 '而不是'42'）。 – 2013-03-17 10:37:04

現在看起來很簡單。非常感謝您的幫助。 – 2013-03-17 12:06:02

您從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);

你會發現一個更新的小提琴here。

（順便說一句，考慮將jQuery('#' + id)的結果緩存在局部變量中以提高效率）。

來源

2013-03-17 10:11:21

弗雷德裏克，謝謝。你的解決方案也適用。 – 2013-03-17 12:12:35

動態JQuery UI滑塊從HTML5數據*和CSS類構造

回答

相關問題