javascript - 如何在单击按钮时获取 slider 值?

标签 javascript jquery

我有一个范围 slider ,有两个范围。我想在我的 JavaScript 中获取此 slider 的值。

这是我所做的:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">	
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
  
  $(function() {

	$("#find_match").click(function(){

      alert($('#amount').val(ui.values[ 0 ]));
      
  });  
  
    $(function() {
      $( "#slider-range" ).slider({
        range: true,
        min: 20,
        max: 60,
        values: [ 20, 30 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        }
      });
      $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
                         " - " + $( "#slider-range" ).slider( "values", 1 ) );
    });
</script>


<body>
    <label for="amount">
        Age range:
    </label>
	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	<div id="slider-range"></div>
        <button id="find_match">Search matches </button>
</body>

onclick()中我已经这样做了;但它并没有成功。

上面的代码中显示“ui 未定义”。 我想要点击按钮时上面 slider 的值。怎么做?

注意: slider 未显示。

最佳答案

您应该在 onclick 函数中使用它:

var minAge = $('#amount').val();

来自documentation of .val() :如果不提供任何参数,.val() 返回项目的值。如果提供一个参数,.val(value) 会将该项的值设置为您提供的参数。

关于javascript - 如何在单击按钮时获取 slider 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34660943/

相关文章:

javascript - 如何在移动设备中制作可拖动对象

javascript - HTML 列表并计算总价

php - 从 php-mysql 填充 javascript 二维数组

jquery - 如何公开 css 以在小部件上进行配置

javascript - 展开一个 div 以在点击时显示溢出

javascript - 如何使背景渐变填充应用于 div 的屏幕?

javascript - 我可以使用 setTimeout 而不是点击处理程序吗?

javascript - jQuery 从没有 value 属性的 select 中删除选项

javascript - 加载缓慢 - 如何正确加载页面以防止图像阻塞(排队)

javascript - 从 jsonp 加载 <li> 会丢失 JQM 格式