-2

请看一下我的示例小提琴

我有一个为转移选择的学分的运行总计。当您选择积分数时，运行总数会增加。它被设计为每节 6 个学分。这部分工作正常。

我想要做的是将两个不同的结果集加在一起......

通讯+人文=总学分

...并让它显示在Total Credits:字段中。这就是我迷路的地方。

我想不通的是如何将两个不同的字段加在一起......

这就是我用来获得最终结果的方法......（ 72 是为了使计数停止在最大 72 个转移学分）

JavaScript... 

$(function($) {
    $('#total_Credits select').change(function() {
        var sum = 0;
        $('#total_Credits select').each(function(idx, elm) {
            sum += parseFloat(elm.value, 10);
        });

     $('#total_Credits').html(Math.min(sum,72).toFixed(2))
    });
});

HTML...

Total Credits: &nbsp;&nbsp;<span id="total_Credits" style="color: red; font-weight:bold; font-size: 2em;"></span>
4

2 回答 2

2

您遇到了多个问题。

首先是 id 必须是唯一的。您不能有多个具有相同 ID 的列表。将“学分”更改为类而不是 id。

其次，没有#total_credits 选择。因此，该更改事件将永远不会发生。每当任何 Credits 选择发生变化时，您都需要计算和设置总计。您可以在现有的更改功能中执行此操作。为此，请获取每个选择的值并将它们相加。

添加了一个小提琴：http: //jsfiddle.net/Tnk9m/1/

calcTotals = function() {
    var grandTotal = 0;
    $('.total').each(function() {
        if ($(this).text()) grandTotal += parseFloat($(this).text(), 10);
    });
    $('#total_Credits').text(Math.min(grandTotal,72).toFixed(2));

};
$('#communication select').change(function () {
    var sum = 0;
    $('#communication select').each(function (idx, elm) {
        sum += parseFloat($(elm).val(), 10);
    });

    $('#total_communication').html(Math.min(sum, 6).toFixed(2));
    calcTotals();
});

ETC...

于 2013-11-07T21:27:36.033 回答
2

您不需要为每组选择使用不同的功能。相反，您可以使用

$(function($) {
    var sum = function($els, prop) {
        var s = 0;
        $els.each(function(idx, elm) {
            s += parseFloat(elm[prop], 10) || 0;
        });
        return s;
    };
    $('.select-wrapper select').change(function() {
        var $wrap = $(this).closest('.select-wrapper');
        $wrap.find('.sum').html(Math.min(sum($wrap.find('select'), 'value'),6).toFixed(2));
        $('.total-sum').html(Math.min(sum($('.sum'), 'innerHTML'),72).toFixed(2));
    });
});

演示

请注意，我对 html 进行了一些修改以使其正常工作，并且修复了诸如 duplicate ids 和 nonsense之类的问题<br>。

于 2013-11-07T22:08:00.260 回答