Question

我需要根据切换价格组件的复选框计算价格总额。基本上，我有这个逻辑：

comp1 = 100
comp2 = 200
comp3 = 300

totalPrice = ->
    if $('#checkboxA').hasClass('checked')
        comp1 = comp1
    else
        comp1 = 0

    if $('#checkboxB').hasClass('checked')
        comp2 = comp2
    else
        comp2 = 0

    if $('#checkboxC').hasClass('checked')
        comp3 = comp3
    else
        comp3 = 0

    return comp1 + comp2 + comp3

但感觉有点尴尬。有更优雅的方式吗？

Answer 1

price1 = 100
price2 = 200
price3 = 300

totalPrice = ->
    total = 0
    total += price1 if $('#checkboxA').hasClass 'checked'
    total += price2 if $('#checkboxB').hasClass 'checked'
    total += price3 if $('#checkboxC').hasClass 'checked'
    total

如果有更多的价格，可能会有一个存储它们的数组（以及相应的复选框css类）会更好。

Answer 2

我会使用multiple-selector一次查找所有选中的元素，然后转换matched elements to an array，然后使用Array.prototype.reduce进行求和。如果您将价格存储在由复选框ID索引的对象中，则reduce回调变得微不足道。像这样：

comp =
    checkboxA: 100
    checkboxB: 200
    checkboxC: 300
summer = (m, e) -> m + comp[e.id]    
sum = $('#checkboxA.checked, #checkboxB.checked, #checkboxC.checked')
    .toArray()
    .reduce(summer, 0)

如果您确定只有那些复选框会有checked课程，那么您可以简化为：

sum = $('.checked').toArray().reduce(summer, 0)

或者如果您可以在复选框中添加一个类来对它们进行分组：

sum = $('.someGroupingClass.checked').toArray().reduce(summer, 0)

或者如果他们都在一个共同的父母身边：

sum = $('whatEverTheParentSelectorIs .checked').toArray().reduce(summer, 0)

您还可以将价格嵌入数据属性中，抛弃comp，并将summer替换为：

summer = (m, e) -> m + $(e).data('price')

您还可以使用循环代替toArray和reduce：

sum = 0
for e in $('.checked') # Use whatever selector you need in here
    sum += $(e).data('price')

js - 使用动态变量计算总数

2 个答案: