JavaScript - 通过选择框更改更新定价

Question

所以...当您从选择框中选择价格选项时，我正在尝试更新比较表顶部的价格。

选择框是隐藏的，由两侧的两个 +/- 按钮控制。

我想获取选择框的值并将其与durationOptions数组中的金额交叉引用，并增加/减少顶部的总气泡。

这是我丑陋的尝试，但我被卡住了，数字到处都是，我确信我会做很长的路。一定有更简单的东西。

这是我的 fiddle : 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);
    }
});

选择框是使用 +/- 按钮选择的正确移动每月选项，它应该更新正上方的定价气泡。

额外信息 单击“+”按钮时，它应该循环到下一个选择选项，获取其值并交叉引用urationOptions数组中的实际货币值，然后将该货币值添加到顶部气泡中的值，当单击“-”时单击后，顶部的气泡量应减少该选择值的 periodOptions 数组中的货币值。

注意:问题之一是很难在选择选项上添加另一个属性，因为它是在 Zend 1.12 中动态构建的，并且没有方法为每个选项提供自定义属性:(

我没有增加/减少的屏幕，但你应该从 fiddle 中得到这个想法。

更新: 不是最漂亮的，但我已经重构并且增量效果很好，但是我该如何反向执行呢？

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

任何帮助将不胜感激:)

内森

Answer 1

你的说法非常含糊。他们并没有真正清楚地了解当前正在发生的事情以及您想要做什么。

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