问题描述
我正在使用具有以下代码的 jquery Range Slider。
$("#maxAge").slider({
range: true,min: 18,max: 75,values: [20,45],slide: function(event,ui) {
$("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
}
});
$("#sliderVal").val($("#maxAge").slider("values",0) + "-" + $("#maxAge").slider("values",1));
<div id="maxAge" min="35" max="75" minVal="25" maxVal="45"></div>
<input type="text" class="slider-text text-right gradient-text mt-2" id="sliderVal" readonly>
我想这样使用它:
$("#maxAge").slider({
range: true,min: $(this).attr('min'),max: $(this).attr('max'),values: [$(this).attr('minVal'),$(this).attr('maxVal')],ui) {
$("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
}
});
我想从 DIV 中获取属性值并在此处使用它,以便我以后可以使用 PHP 更改属性值。
解决方法
考虑以下使用数据属性的示例。
$(function() {
$("#maxAge").slider({
range: true,min: $("#maxAge").data('min'),max: $("#maxAge").data('max'),values: [
$("#maxAge").data("min-value"),$("#maxAge").data('max-value')
],slide: function(event,ui) {
$("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
}
});
$("#sliderVal").val($("#maxAge").data("min-value") + "-" + $("#maxAge").data('max-value'));
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="maxAge" data-min="18" data-max="75" data-min-value="20" data-max-value="45"></div>
<input type="text" class="slider-text text-right gradient-text mt-2" id="sliderVal" readonly />
数据属性是一种常用的方法来存储与元素相关的数据。您可以使用 jQuery .data()
轻松调用它。
查看更多: