我有一个价格范围滑块。当我滑动范围滑块时我想要什么,然后在警报框中获得它的值。现在,当我提示它[objectobject]
不知道为什么时会发生什么?如何在警报框中获取价格滑块值?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script>
$(document).ready(function(){
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 2000,
values: [ 200, 1600 ],
slide: function( event, ui ) {
$("#price").val(ui.values[0] + " - " + ui.values[1]);
}
});
price_data = $("#price").val($("#slider-3").slider("values", 0) +
" - " + $("#slider-3").slider("values", 1) );
alert(price_data);
});
</script>
<p>
<input type="text" id="price" readonly>
</p>
<div id="slider-3"></div>
答案 0 :(得分:1)
因此,您的代码在技术上可以正常工作。您的警报正在显示[object Object]
,因为您只是输出price_data
,它是一个jQuery对象,因为您设置了它的值而没有得到它的值。
您可以通过登录price_data
轻松地看到它。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script>
$(document).ready(function(){
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 2000,
values: [ 200, 1600 ],
slide: function( event, ui ) {
$("#price").val(ui.values[0] + " - " + ui.values[1]);
}
});
price_data = $("#price").val($("#slider-3").slider("values", 0) +
" - " + $("#slider-3").slider("values", 1) );
console.log(price_data);
alert(price_data);
});
</script>
<p>
<input type="text" id="price" readonly>
</p>
<div id="slider-3"></div>
只需使用price_data.val()
即可获取警报值。
参见下文:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script>
$(document).ready(function(){
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 2000,
values: [ 200, 1600 ],
slide: function( event, ui ) {
$("#price").val(ui.values[0] + " - " + ui.values[1]);
}
});
price_data = $("#price").val($("#slider-3").slider("values", 0) +
" - " + $("#slider-3").slider("values", 1) );
alert(price_data.val());
});
</script>
<p>
<input type="text" id="price" readonly>
</p>
<div id="slider-3"></div>