jQuery价格计算器与多个选择元素

jQuery price calculator with multiple select elements

本文关键字：选择 元素 计算器 jQuery      更新时间：2023-09-26

当选择按钮和选择菜单时，我使用下面的代码添加/删除span (quote-price)中的价格。下面的代码对于按钮和当我只使用一个选择菜单时工作得很好，但是当我使用多个选择菜单时，它就失败了。有人知道我如何调整下面的代码与多个选择菜单的工作?

$(document).ready(function() {
    function updateTotal() {
        var total = 0;
        $('button.selected').each(function() {
            total += parseFloat($(this).val());
        });
        total += parseFloat($('select').val());
        $('span.quote-price').text("£" + total.toFixed(2));
    }
    $('button').click(function() {
        $(this).toggleClass('selected');
        updateTotal();
    });
    $('select').change(updateTotal);
    $('.reset').click(function() {
        $('.selected').removeClass('selected');
        $('select').val('0.00');
        updateTotal();
    });
});

您可以直接模仿您已经拥有的按钮代码。而不是:

total += parseFloat($('select').val());

. .使用:

$('select').each(function() {
    total += parseFloat($(this).val());
});

将把页面上每次选择的值添加到变量total。如果你只是想要一些选择(你可能有他们在你的页面上的其他原因)，添加一个类(如price为例)，并改变选择器为select.price。

试试下面的代码:

$(document).ready(function() {
    function updateTotal() {
        var total = 0;
        $('button.selected').each(function() {
            total += parseFloat($(this).val());
        });
        $('select').each(function() {
            total += parseFloat($(this).val());
        });
        $('span.quote-price').text("£" + total.toFixed(2));
    }
    $('button').click(function() {
        $(this).toggleClass('selected');
        updateTotal();
    });
    $('select').change(updateTotal);
    $('.reset').click(function() {
        $('.selected').removeClass('selected');
        $('select').val('0.00');
        updateTotal();
    });
});

代替

total += parseFloat($('select').val());

我用

$('select').each(function() {
    total += parseFloat($(this).val());
});
相关文章：