Question

我正在尝试设置票价计算器，根据所选位置显示每张票的价格。

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

除$('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>

Answer 1

您的代码存在一些问题，最直接的问题是您的更改侦听器中的update调用未传递正确的参数。将其从update();更改为update(cost, time, this.value)，它应该有效。

此外（假设预期的行为是使用在case / switch语句顶部计算的cost和time值。在区域值更改时，您将要重新计算cost和time变量。另外，你会希望这会影响滑块中的回调。我会做这样的事情以确保一切正常，基本上只是make {{ 1}}和cost个全局变量，并在time函数调用之前更新它们。

update

修改

此外，您还需要刷新滑块以更新时间和成本变量中反映的更改。请参阅How to refresh a jQuery UI Slider after setting min or max values?作为示例，您需要调用类似的内容，以便滑块反映这些更改：

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 ); }

Answer 2

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

即可

根据选择选项

2 个答案: