根据选择选项改变jQuery UI滑块值

Change jQuery UI Slider Value Based on Select Option

本文关键字：UI jQuery 改变 选择 选项      更新时间：2023-09-26

我正在尝试设置票价计算器，它显示了基于选定位置的每张票的价格。

票价计算器的值基于select表单中设置的value属性。

我所有的代码工作，除了$('region').on('change')的行动。我根本无法让计算器中的数据更新为新值。

小提琴: http://jsfiddle.net/2hmcf5wf/1/

$(function() {
  // setting up region variables
  switch ($('#region').val()) {
    case '10':
      var cost = 10,
        time = 300;
      break;
    case '20':
      var cost = 20,
        time = 600;
      break;
  }
  // slider
  $('#slider').slider({
    max: time,
    min: cost,
    step: cost,
    value: cost,
    slide: function(event, ui) {
      update(cost, time, ui.value);
    }
  });
  // set initial values
  $('#ticket').html('1 ticket');
  $('#price').html('$' + $('#slider').slider('value'));
  // region change
  $('#region').on('change', function() {
    update();
  });
});
function update(cost, time, value) {
  $('#ticket').html((value / cost) + ' ticket');
  $('#price').html('$' + value);
}
body {
    text-align: center;
    margin: 50px auto;
}
#region {
    display: block;
    margin: 10px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<select id="region">
        <option value="10" >Los Angeles, CA</option>
        <option value="20">New York, NY</option>
    </select>
<div id="slider"></div>
<span id="ticket"></span>
<div id="slider"></div>
<div id="price"></div>

您的代码有几个问题，最直接的问题是您的更改侦听器中的update调用没有传递适当的参数。把它从update();改为update(cost, time, this.value)，它应该可以工作了。

另外(假设预期的行为是使用在case/switch语句顶部计算的cost和time值)。在区域值更改时，您需要重新计算cost和time变量。另外，你会希望这个影响滑动条中的回调。我会这样做，以确保一切工作，基本上，只是使cost和time全局变量，并在update函数调用之前更新它们。

var cost, time;
$(function() {
    // setting up region variables
    changeRegion($( '#region' ).val());
    // slider
    $( '#slider' ).slider({
        max: time,
        min: cost,
        step: cost,
        value: cost,
        slide: function( event, ui ) {
            update(ui.value);
        }
    });
    // set initial values
    $( '#ticket' ).html( '1 ticket' );
    $( '#price' ).html( '$' + $( '#slider' ).slider( 'value' ) );
    // region change
    $( '#region' ).on( 'change', function() {
        changeRegion(this.value);
        update(this.value);
    });
});
function changeRegion(value) {
  switch ( value ) {
      case '10':
          cost = 10, time = 300;
          break;
      case '20':
          cost = 20, time = 600;
          break;
  }
}
function update( value ) {
    $( '#ticket' ).html( ( value / cost ) + ' ticket' );
    $( '#price' ).html( '$' + value );
}
编辑:

此外，您还需要刷新滑块以更新时间和成本变量中反映的变化。参见如何刷新一个jQuery UI滑块设置最小或最大值后?作为一个例子，为了让滑动条反映这些更改，您需要调用如下代码:

sliderObject.slider("option", "min", cost);
sliderObject.slider("option", "step", cost);
sliderObject.slider("option", "max", time);
sliderObject.slider("value", cost);

参数中没有数据，因为您根本没有传递它们。只需将update()更改为update(cost, time, $('#slider').slider('value'));

相关文章：