Question

我正在尝试将表单输入的值加在一起，点击它们以获得订单的总价格。

不是试图用文字解释，而是我想要做的jsFiddle。

如果单击顶行中的任何按钮并从一个按钮移动到另一个按钮，您看到的内容可以正常工作。如果在单击顶行中的按钮后单击添加1专色按钮，它也可以正常工作。

出现问题的地方是，如果您仍然在检查专色按钮时尝试更改所需的卡数。

您必须取消选择两行中的按钮，然后重新选择以获得正确的值。

值应该是（只是顶行/添加了底行）：

495/770
550/847
605/935

660/1012

var spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, colour_price = 0, corner_price = 0;
var spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', colour_desc = '', corner_desc = '';

$('.order-option + label').click(function(e) {

    var radio = $(this).attr('for');
    radio = $('#' +radio );

    switch($(radio).attr('name')) {
        case 'specifications':
            spec_price = parseInt(radio.val());
            spec_desc = '<p>'+radio.data('title')+' </p>';
        break;
        case 'envelopes':
            env_price = parseInt(radio.val());
            env_desc= '<p>'+radio.data('title')+' </p>';
        break;
        case 'liners':
            liner_price = parseInt(radio.val());
            liner_desc ='<p>'+radio.data('title')+' </p>';
        break;
        case 'cards':
            card_price = parseInt(radio.val());
            card_desc = '<p>'+radio.data('title')+' </p>';
        break;
        case 'colours':
            colour_price = parseInt(radio.val());
            colour_desc = '<p>'+radio.data('title')+' </p>';
        break;
        case 'corners':
            corner_price = parseInt(radio.val());
            corner_desc = '<p>'+radio.data('title')+' </p>';
        break;
    }

    switch($(radio).attr('id')) {
        case 'specifications-radio1':
            $('#cards-radio').val('275');
        break;
        case 'specifications-radio2':
            $('#cards-radio').val('297');
        break;
        case 'specifications-radio3':
            $('#cards-radio').val('330');
        break;
        case 'specifications-radio4':
            $('#cards-radio').val('352');
        break;
    }

    var total_price = +spec_price + env_price + liner_price + card_price + colour_price + corner_price;
    var full_desc = spec_desc + env_desc + liner_desc + card_desc + colour_desc + corner_desc;

    if(radio.is(':checked')) {
        e.preventDefault();
        var subtract = parseInt(radio.val());
        var remove = radio.data('title');
        total_price = total_price - subtract;
        full_desc = full_desc.replace(remove,'');
        radio.removeAttr('checked');
        if($('.order-option:checked').length < 1) {
            spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, total_price = 0, colour_price = 0, corner_price = 0;
            spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', full_desc = '', colour_desc = '', corner_desc = '';
        }
    }
    // alert(total_price);

    $('.order-preview-total').html('$'+total_price+' (inc gst)');
    $('#order-preview-total').val('$'+total_price);
    $('.order-preview-content').html(full_desc);
    $('#order-preview-content').val(full_desc);

});

任何人都知道我哪里出错了？

Answer 1

Phew，我有一段时间解密，然后简化你的逻辑，然后弄清楚如何制作单选按钮切换，然后得到正确的值，这些都源于你所问的问题。

首先我要说，你应该尝试使用jQuery选择器来避免编写那些冗长的switch语句，它们很难阅读并且难以维护。

我将卡和颜色选择器更改为这些并将卡无线电值移动到卡无线电元素中的数据属性（唯一的缺点是您需要检查无线电组isNaN是否因为解析或选择未定义的变量会引发异常

    var spec_price = 0, env_price = 0, liner_price = 0, card_price = 0, colour_price = 0, corner_price = 0;
    var spec_desc = '', env_desc = '', liner_desc = '', card_desc = '', colour_desc = '', corner_desc = '';

    //card selected and a colour selected
    if($('#cards-radio').is(':checked') && !isNaN($("input:radio[name ='specifications']:checked").val())) {
        price = $("input:radio[name ='specifications']:checked").data('card');
        card_price = parseInt(price);
        card_desc = '<p>'+$('#cards-radio').data('title')+' </p>';
    }

    //colour selected
    if(!isNaN($("input:radio[name ='specifications']:checked").val())) {
        price = $("input:radio[name ='specifications']:checked").val();
        spec_price = parseInt(price);
        spec_desc = $("input:radio[name ='specifications']:checked").data('title');
    }

现在你的总数总是显示奇数的原因是触发html更改的标签点击事件将发生在单选按钮的事件之前，该事件改变了哪一个被选中（这花了我最长的时间才算出来）。这意味着它会认为之前选择的无线电当前被选中并且弄乱了你的计算

因此，我没有使用标签click作为事件，而是使用Rob Ws解决方案将元素包装在div中并停止所有子元素的传播并手动执行（就像您尝试使用标签一样）点击事件）。

Have a look here

添加，减去和动态更新表单值

1 个答案: