Question

我正在为我的一位朋友制作互动价目表。她想要一个价格表，顾客可以查看她的价格。如果客户点击多个选项，则会自动计算价格。有两个价目表。一个为女人，一个为男人到目前为止这是有效的。

我遇到的问题是：当我在女人和男人之间改变时，价格仍在“总计”字段中。
但对我来说最大的问题是，当客户选择2-4个选项时，他会获得10％的折扣和5个或更多选项，他可以获得20％的折扣。

在这里，您可以看到我的codepen

$(document).ready(function() {
    $('ul.tabs li').click(function() {
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');

    })
})

$(function() {
    $('input').click(function() {

        var total = 0;
        $('input:checked').each(function(index, item) {
            total += parseFloat(item.value);
        });
        $('.total').text(total);
    });
});

$('#head_checkbox').on('change', function() {
    if ($(this).is(':checked')) {
        $('.person').attr('checked', true);
    } else {
        $('.person').attr('checked', false);
    }
});

$('.person').click(function() {
    var total_length = $('.person').length;
    var total_checked_length = $('.person:checked').length;

    if (total_length == total_checked_length) {
        $('#head_checkbox').attr('checked', true);
    } else {
        $('#head_checkbox').attr('checked', false);
    }
});

var checked = false;
$('.all').click(function() {
    e = $(this).attr('name');
    checked = !checked;
    $('input[class=' + e).prop('checked', checked);
});

Answer 1

1）将选择器更改为仅匹配当前选项卡中的输入。

2）计算已检查选项的数量，并在完成后对总数应用折扣。

$(function() {
    $('input').click(function() {

        var total = 0;
        var option_count = 0;
        $('.tab-content.current input:checked').each(function(index, item) {
            total += parseFloat(item.value);
            option_count++;
        });
        // Apply multiple product discount
        if (option_count >= 5) {
            total *= .80;
        } else if (option_count >= 2) {
            total *= .90;
        }
        $('.total').text(total);
    });
});

Answer 2

修复了不同标签上的“总计”：

$(document).ready(function() {
        tab_1_total = 0;
        tab_2_total = 0;
        tab_id = "";
        $('ul.tabs li').click(function() {
                tab_id = $(this).attr('data-tab');

                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');

                $(this).addClass('current');
                $("#" + tab_id).addClass('current');

                if( tab_id == "tab-1") {
                    $('.total').text(tab_1_total);
                }

                else if( tab_id == "tab-2") {
                    $('.total').text(tab_2_total);
                }
        })
})

$(function() {
        $('input').click(function() {

                var total = 0;
                var option_count = 0;   

                $('.tab-content.current input:checked').each(function(index, item) {
                        total += parseFloat(item.value);
                        option_count++;
                });
                // Apply multiple product discount
                if (option_count >= 5) {
                        total *= .80;
                } else if (option_count >= 2) {
                        total *= .90;
                }

                total = total.toFixed(2);
                $('.total').text(total);

                if( tab_id == "tab-1") {
                    tab_1_total = total;
                }

                else if( tab_id == "tab-2") {
                    tab_2_total = total;                    
                }

        });
});

$('#head_checkbox').on('change', function() {
        if ($(this).is(':checked')) {
                $('.person').attr('checked', true);
        } else {
                $('.person').attr('checked', false);
        }
});

$('.person').click(function() {
        var total_length = $('.person').length;
        var total_checked_length = $('.person:checked').length;

        if (total_length == total_checked_length) {
                $('#head_checkbox').attr('checked', true);
        } else {
                $('#head_checkbox').attr('checked', false);
        }
});

计算2/5项后的价格表+折扣

2 个答案: