我正在使用jQuery滑块插件。滑块的当前选定值应该用AJAX发送到服务器端脚本。
目前我有一个错误的行为。当前选择的值总是在用Ajax发送的值之前或之后的一个值。
例如：如果滑到值5/50，它将向服务器端脚本发送“6”而不是“5”。
我做了一把JS小提琴。只需在developers network选项卡下查看。
// Slider Script
$("#slider-vertical").slider({
orientation: "horizontal",
range: "min",
min: 1,
max: 50,
value: 50,
slide: function (event, ui) {
$("#amount").val(ui.value);
},
});
$("#amount").val($("#slider-vertical").slider("value"));
// Get Response
$('#slider-vertical').on('slide', getResponse);
getResponse(0);
function getResponse() {
let itemlevel2 = $("#slider-vertical").slider("value");
ajaxManager.add({
type: "GET",
cache: "true",
url: "itemscript.php",
data: {
"itemlevel": itemlevel2
},
success: function (data) {
}
});
}
});
为了纠正这种行为，您可以使用stop事件仅在滑块停止移动时进行AJAX调用。这样做的另一个好处是，不会让您的服务器充斥着对滑块所移动的每个值的请求。试试看：
null
jQuery(function($) {
$("#slider-vertical").slider({
orientation: "horizontal",
range: "min",
min: 1,
max: 50,
value: 50,
slide: function(event, ui) {
$("#amount").val(ui.value);
},
stop: getResponse
});
$("#amount").val($("#slider-vertical").slider("value"));
getResponse(0);
function getResponse() {
let itemlevel2 = $("#slider-vertical").slider("value");
console.log(itemlevel2);
// AJAX here...
}
});.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
width: 100%;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header {
border: 1px solid #444 !important;
background: none !important;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
background-color: #353232;
}
.ui-slider-horizontal .ui-slider-range-min {
left: 0;
background-color: #817373!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<p>
<label class="item-slider" for="amount">Stufe:</label>
<input class="item-slider" readonly id="amount">/
<input class="item-slider" readonly id="amount2" value="50">
</p>
<div id="slider-vertical" style="height: 10px;"></div>