JavaScript - 通過選擇框更改價格更新

Question

因此...我試圖在您選擇框中的價格選項時更新比較表頂部的價格。

選擇框是隱藏的，由兩邊的+/-按鈕控制。

我想採用選擇框的值，並將其與durationOptions數組中的量交叉引用，並增加/減少頂部的總泡泡數。

這是我的醜陋嘗試，但我卡住了，數字都在這個地方，我相信我正在做這個漫長的道路。一定有一些更簡單的事情。

這裏是我的小提琴： http://jsfiddle.net/xt2qLzmk/1/

代碼：

var customFlag = 0; 


$(".select-plus").click(function (event) { 

    customFlag = 0; 

    var durationOptions = new Array(); 
    durationOptions[18] = 95; (select option value 18 = £95 etc...) 
    durationOptions[4] = 125; 
    durationOptions[30] = 165; 
    durationOptions[20] = 195; 

    The random indexes are actually their values in the DB but will build that array from the DB later, made a static one for quick prototyping. 


    var isLastElementSelected = $('#customise-rightmove_zoopla_700_sites > option:selected').index() == $('#customise-rightmove_zoopla_700_sites > option').length - 1; 

    if (!isLastElementSelected) { 
     $('#customise-rightmove_zoopla_700_sites > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 

     // Update label with current select value 
     var currentVal = $('#customise-rightmove_zoopla_700_sites > option:selected').attr('label'), 
      labelId = 'customise-rightmove_zoopla_700_sites_label'; 

     var bubblePrice = $('#customise-bubble-display-price').text(), 
      optionValue = $('#customise-rightmove_zoopla_700_sites > option:selected').val(), 
      oldOptionValue = $('#customise-rightmove_zoopla_700_sites > option:selected').prev('option').val(); 

     var labelAmount = parseFloat(durationOptions[optionValue]), 

      oldLabelAmount = parseFloat(durationOptions[oldOptionValue]); 

     if (oldLabelAmount == 95) { 
      oldLabelAmount = 0; 
     } 

     var newPrice = (parseInt(bubblePrice) - parseFloat(oldLabelAmount)) + parseFloat(labelAmount); 
     $('#customise-bubble-display-price').text(newPrice); 


     $('#' + labelId).text(currentVal); 
    } 


}); 

var customFlag 

$(".select-minus").click(function (event) { 
    customFlag = 0; 

    var durationOptions = new Array(); 
    durationOptions[18] = 95; 
    durationOptions[4] = 125; 
    durationOptions[30] = 165; 
    durationOptions[20] = 195; 


    var isLastElementSelected = $('#customise-rightmove_zoopla_700_sites > option:selected').index() == $('#customise-rightmove_zoopla_700_sites > option:first-child').index(); 

    if (!isLastElementSelected) { 
     $('#customise-rightmove_zoopla_700_sites > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected'); 

     // Update label with current select value 
     var currentVal = $('#customise-rightmove_zoopla_700_sites > option:selected').attr('label'), 
      labelId = 'customise-rightmove_zoopla_700_sites_label'; 

     var bubblePrice = $('#customise-bubble-display-price').text(), 
      optionValue = $('#customise-rightmove_zoopla_700_sites > option:selected').val(), 
      oldOptionValue = $('#customise-rightmove_zoopla_700_sites > option:selected').next('option').val(); 

     var labelAmount = parseFloat(durationOptions[oldOptionValue]), 

      oldLabelAmount = parseFloat(durationOptions[optionValue]); 

     if (durationOptions[optionValue] == 95) { 
      return; 
     } 

     var newPrice = (parseInt(bubblePrice) - parseFloat(oldLabelAmount)) + parseFloat(labelAmount); 
     $('#customise-bubble-display-price').text(newPrice); 


     $('#' + labelId).text(currentVal); 
    } 
}); 

的選擇框是正確的舉措月度期權的+/-鍵選擇，它應該直接更新上面的價格泡沫。

額外的信息 當點擊「+」按鈕，它應該循環到下一個選擇的選項，把它的價值和交叉引用的durationOptions數組中的實際貨幣值，那麼該貨幣價值增加值中的泡沫在頂部，當點擊「 - 」時，應該通過durationOptions數組中的貨幣值爲該選擇值減少頂部的泡沫數量。

注：其中一個問題是，它是很難把對選擇選項另一個屬性，因爲它是動態地建立在Zend的1.12，也沒有方法給每個選項自定義屬性:(

我不噸有它的屏幕增大/減小，但你應該從小提琴的想法

更新： 不是pretiest但我有重新分解和遞增效果很好，但我怎麼做反向？

http://jsfiddle.net/xt2qLzmk/2/

任何幫助，將不勝感激:)

彌敦道

Answer 1

你的說法是非常模糊的。他們並沒有真正清楚當前正在發生的事情以及你想做什麼。

我們非常歡迎您使用屏幕截圖讓我們瞭解您的問題。