使用默认属性值的jQuery范围滑块

Question

我使用的是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')],
slide: function(event, ui) {
$("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
}
});

我想从DIV中获取属性值并在这里使用它，以便以后可以使用PHP更改属性值。

Answer 1

您可以使用your_div_id获取属性的值，然后使用parseInt()将字符串解析为整数。

演示代码 :

$("#maxAge").slider({
range: true,
min: parseInt($("#maxAge").attr('min')), //get it like this and then pasre it..as integer
max: parseInt($("#maxAge").attr('max')),
values: [parseInt($("#maxAge").attr('minVal')), parseInt($("#maxAge").attr('maxVal'))],
slide: function(event, ui) {
$("#sliderVal").val(ui.values[0] + "-" + ui.values[1]);
}
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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" min="18" max="75" minVal="20" maxVal="45"></div>
<input type="text" class="slider-text text-right gradient-text mt-2" id="sliderVal" readonly>

Answer 2

考虑以下使用数据属性的示例。

$(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()轻松地调用它。

查看更多：

https://api.jquery.com/data/