多次使用jquery-ui滑块，但php以编程方式设置了不同的最小最大值
多次使用jquery-ui滑块，但php以编程方式设置了不同的最小最大值
提问于 2018-08-17 22:41:18
我使用jquery-ui和一些范围滑块，它们是在外部JavaScript文件中指定的，如下所示：
$( function() {
$( ".slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$(this).prev().val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$(".slider-range").on("slidestop", function(event, ui) {
$(this).prev().val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
localStorage.setItem(this.getAttribute("id") + '_min', ui.values[ 0 ]);
localStorage.setItem(this.getAttribute("id") + '_max', ui.values[ 1 ]);
aktualisiert();
});
$('.slider-range').prev().val( $( ".slider-range" ).slider( "values", 0 ) +
"-" + $( ".slider-range" ).slider( "values", 1 ) );
});滑块在PHP文件中使用，如下所示：
<label>Price range:</label>
<input type="text" name="this_slider1" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="this_slider1" class="slider-range"></div>
<br>
<label>Price range:</label>
<input type="text" name="this_slider2" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="this_slider2" class="slider-range"></div>
<br>我的问题是，在提交表单之后，在aktualisiert()函数中范围滑块的"slidestop“完成后，范围滑块的值被重置。因此，我需要将这些值重新设置为所选的值。为此，我将这些值保存在本地存储中，并在刷新包含所有范围滑块的页面后尝试重置这些值。我尝试如下所示：
$(window).bind("load", function() {
var range_sliders = document.getElementsByClassName("slider-range");
for (i = 0; i < range_sliders.length; i++) {
if (localStorage.getItem(range_sliders[i].getAttribute("id") + '_min') != null){
$('#' + range_sliders[i].getAttribute("id")).slider('values', 0, localStorage.getItem(range_sliders[i].getAttribute("id") + '_min'));
$('#' + range_sliders[i].getAttribute("id")).slider('values', 1, localStorage.getItem(range_sliders[i].getAttribute("id") + '_max'));
$('#' + range_sliders[i].getAttribute("id")).slider('refresh');
}
}
});但它不起作用。我用一个警告框检查是否输入了if语句。但是范围滑块的值被设置为默认值。我也试过了
$('#' + range_sliders[i].getAttribute("id")).slider('option','values', [ localStorage.getItem(range_sliders[i].getAttribute("id") + '_min'), localStorage.getItem(range_sliders[i].getAttribute("id") + '_max')]);而不是
$('#' + range_sliders[i].getAttribute("id")).slider('values', 0, localStorage.getItem(range_sliders[i].getAttribute("id") + '_min'));
$('#' + range_sliders[i].getAttribute("id")).slider('values', 1, localStorage.getItem(range_sliders[i].getAttribute("id") + '_max'));但所有这些都不起作用。我哪里搞错了。我想问题出在这几行
$('#' + range_sliders[i].getAttribute("id")).slider('values', 0, localStorage.getItem(range_sliders[i].getAttribute("id") + '_min'));
$('#' + range_sliders[i].getAttribute("id")).slider('values', 1, localStorage.getItem(range_sliders[i].getAttribute("id") + '_max'));因为如果我在它们之前和之后添加一个警告，那么只会显示之前的那个。你有什么想法吗？
谢谢
回答 1
Stack Overflow用户
发布于 2018-08-19 03:49:44
找到了答案：
$( document ).ready(function() {
var range_sliders = document.getElementsByClassName("slider-range");
for (i = 0; i < range_sliders.length; i++) {
if (localStorage.getItem(range_sliders[i].getAttribute("id") + '_min') != null){
try {
$('#' + range_sliders[i].getAttribute("id")).slider('values', 0, localStorage.getItem(range_sliders[i].getAttribute("id") + '_min'));
$('#' + range_sliders[i].getAttribute("id")).slider('values', 1, localStorage.getItem(range_sliders[i].getAttribute("id") + '_max'));
$('#' + range_sliders[i].getAttribute("id")).prev().val( localStorage.getItem(range_sliders[i].getAttribute("id") + '_min') + "-" + localStorage.getItem(range_sliders[i].getAttribute("id") + '_max') );
}
catch(err) {
alert(err.message);
}
}
}
});我将代码设置为这样的值，它可以工作，所以有必要将它放入
$( document ).ready(function() {
});部分，并调用选择器，如
$('#' + range_sliders[i].getAttribute("id")).slider这就是全部。也许这对将来的任何人都有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51897779
复制相关文章
相似问题