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

【问题标题】：How to alert price range slider value in jQuery?如何在 jQuery 中提醒价格范围滑块值？
【发布时间】：2019-01-25 04:58:02
【问题描述】：

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

【问题讨论】：

将警报放入slide 事件处理程序中。在$("#price").val .... 行下
它再次显示给我[objectobject]@AdamH
你想在你的slide回调中设置什么值？它被设置为字符串，但幻灯片通常用于刻度上的数字。在您调用price_data = $("#price").val... 的行上，您似乎将滑块值设置为一个jQuery 对象，然后由初始val 调用返回，因此您得到输出[object Object]。
您正在提醒调用val(...) 的结果。你想要val()。
这提供了很多方法：stackoverflow.com/questions/2939865/…

标签： javascript jquery

【解决方案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>

【讨论】：

好收获哈哈，我需要更多的咖啡