cài đặt thông số trượt jQuery ui từ các thuộc tính dữ liệu html

Question

Tôi muốn nhúng tối đa các thanh trượt của tôi nằm trong tham số dữ liệu html. Tôi đã làm một số debug, và mặc dù thực tế rằng các dữ liệu có thể được truy cập và là một con số, thanh trượt vẫn sẽ sử dụng tối đa mặc định của 100.

HTML của tôi:

<div class="slider" data-max="10"></div> 
<label for="slider_value">Slider Value:</label> 
<input type="text" id="slider_value" /> 

My Javascript:

$(document).ready(function() { 
    $("div.slider").slider({ 
     min: 0, 
     max: $(this).data("max"), 
     slide: function (event, ui) { 
      $("input#slider_value").val(ui.value); 
     } 
    }); 
}); 

Xem này fiddle

Answer 1

Khi các đối tượng lập luận cho slider() được đánh giá, this là một tham chiếu đến document đối tượng, không phải div.slider. Bạn sẽ cần phải tìm div.slider lại hoặc lưu một tham chiếu đến nó (demo):

$(document).ready(function() { 
    var div = $("div.slider"); 
    div.slider({ 
     min: 0, 
     max: div.data("max"), 
     slide: function (event, ui) { 
      $("input#slider_value").val(ui.value); 
     } 
    }); 
}); 

Answer 2

Sử dụng create sự kiện jQuery UI với option phương pháp để thiết lập tùy chọn động:

$(document).ready(function() { 
 
    $('div.slider').slider({ 
 
     min: 0, 
 
     create: function(event, ui) { 
 
      $(this).slider('option', 'max', $(this).data('max')); 
 
     }, 
 
     slide: function(event, ui) { 
 
      $("input#slider_value").val(ui.value); 
 
     } 
 
    }); 
 
});