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 для этого значения выбора.

NB: Одна из проблем состоит в том, что трудно поставить еще один атрибут на выбранных опций, как она строится динамически в Zend 1.12, и нет никакого способа, чтобы дать каждому опционов пользовательский атрибут :(

Я не» т имеют экраны него увеличение/уменьшение, но вы должны получить идею от скрипки

UPDATE:. Не pretiest но я повторно учитываться и инкрементация работает хорошо, но как я могу это сделать в обратном направлении?

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

Любая помощь будет принята с благодарностью :)

Натан

Answer 1

Ваши высказывания весьма неоднозначно. На самом деле они не дают четкой картины того, что происходит в настоящее время и что вы хотите делать.

Вы всегда можете помочь нам понять вашу проблему, используя снимки экрана.