js - 使用動態變量計算總量

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')