基於選擇選項更改jQuery UI滑塊值

Question

我試圖設置機票價格計算器，它根據選定的位置向您顯示每張票的價格。

機票價格計算器的值基於在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>

Answer 1

有幾個與你的代碼的問題，眼前的問題是，你的變化監聽在您update調用沒有傳遞正確的參數。將它從update();更改爲update(cost, time, this.value)，它應該可以工作。

此外（假設預期的行爲是使用在你的情況/ 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); 
} 

Edi t：

此外，您還需要刷新滑塊以更新時間和成本變量中反映的更改。見How to refresh a jQuery UI Slider after setting min or max values?作爲一個例子，你需要調用是這樣爲了使滑塊，以反映這些變化：

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

Answer 2

您不必在參數數據，因爲你根本就沒有通過他們。只要改變update()到update(cost, time, $('#slider').slider('value'));