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中动态构建的，并且没有方法可以为每个选项提供自定义属性：（

我没有增加/减少的屏幕，但你应该从小提琴那里得到这个想法。

更新：不是最好的，但我已经重新考虑，增量效果很好，但我该怎么做呢？

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

非常感谢任何帮助：）

森

Answer 1

你的陈述非常含糊不清。他们并没有真正清楚地了解当前正在发生的事情和你想做的事情。

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

JavaScript - 使用选择框更改更新定价

1 个答案: