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

【问题标题】：js - calculate total using dynamic variablesjs - 使用动态变量计算总数
【发布时间】：2015-07-13 06:37:26
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery coffeescript

【解决方案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 类）可能会更好。

【讨论】：

【解决方案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')

【讨论】：