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

你的说法是非常模糊的。他们并没有真正清楚当前正在发生的事情以及你想做什么。

我们非常欢迎您使用屏幕截图让我们了解您的问题。