如何在jQuery中提醒价格范围滑块值？

Question

我有一个价格范围滑块。我想要什么，当我滑动范围滑块，然后我在警告框中得到它的值。现在，当我警告它显示[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>

​

Answer 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>

​