jquery不更新值/變量

Question

我有一個有點麻煩的jQuery在我的應用程序中分配一個隱藏的表單的稅款，運輸和總領域的價值之前簽出。我主要工作，但由於某種原因，如果你點擊「是的，我住在科羅拉多州」（這將分配一個9美元的州稅），總計沒有得到適當補充（不加稅） ，即使稅收確實顯示。

我添加了一個css-lite代碼片段，可以複製問題。只需點擊「是我住在CO」，然後點擊「查看運送選​​項」和「計算總計」。

$(document).ready(function(){ 
 
    var $subtotal = $("#hfSubtotal").val(); 
 
    $(".footer").removeClass("top-shadow-inset"); 
 
    $(".choiceYesCO").click(function(){ 
 
     $(".choice-box").removeClass("active"); 
 
     $(".icon-choice").removeClass("ion-ios-checkmark-outline ion-ios-circle-outline") 
 
     $(".choice-no-co").addClass("ion-ios-circle-outline") 
 
     $(".choice-yes-co").addClass("ion-ios-checkmark-outline") 
 
     $(this).addClass("active"); 
 
     var $tax = parseFloat($subtotal * .0463).toFixed(2); 
 
     $("#hfTax").val($tax); 
 
     $(".fieldTax").html("Tax: $" + $tax); 
 
    }); 
 
    $(".choiceNoCO").click(function(){ 
 
     $(".choice-box").removeClass("active"); 
 
     $(".icon-choice").removeClass("ion-ios-checkmark-outline ion-ios-circle-outline") 
 
     $(".choice-no-co").addClass("ion-ios-checkmark-outline") 
 
     $(".choice-yes-co").addClass("ion-ios-circle-outline") 
 
     $(this).addClass("active"); 
 
     var $tax = parseFloat(0.00).toFixed(2); 
 
     $("#hfTax").val($tax); 
 
     $(".fieldTax").html("Tax: $" + $tax); 
 
    }); 
 
    $(".submitTax").click(function(){ 
 
     $(".stepTax").addClass("hidden"); 
 
     $(".stepShipping").removeClass("hidden"); 
 
     $(".fieldTax").removeClass("hidden"); 
 
    }); 
 
    var $tax = $("#hfTax").val(); 
 
    $(".submitShipping").click(function(){ 
 
     var $shipping = parseFloat(0.00).toFixed(2); 
 
     $("#hfShipping").val($shipping); 
 
     $(".fieldShipping").html("Shipping: $" + $shipping); 
 
     var $total = parseFloat($subtotal).toFixed(2); + parseFloat($tax).toFixed(2); + parseFloat($shipping).toFixed(2); 
 
     $("#hfTotal").val($total); 
 
     $(".fieldTotal").html("<strong>Total: $" + $total + "</strong>"); 
 
     $(".stepShipping").addClass("hidden"); 
 
     $(".stepTotal").removeClass("hidden"); 
 
     $(".fieldShipping").removeClass("hidden"); 
 
     $(".fieldTotal").removeClass("hidden"); 
 
    }); 
 
    $(".submitTotal").click(function(){ 
 
     $(".edit_order").submit(); 
 
    }); 
 
    });

.btn { 
 
    display: block; 
 
    background-color: red; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="stepTax"> 
 
     <h3>Do you live in Colorado?</h3> 
 
     <div class="choiceYesCO choice-box"><h4><i class="icon choice-yes-co icon-choice ion-ios-circle-outline"></i>Yes, I live in Colorado.</h4></div> 
 
     <div class="choiceNoCO choice-box"><h4><i class="icon choice-no-co icon-choice ion-ios-circle-outline"></i>No, I don't live in Colorado.</h4></div> 
 
     <div class="btn submitTax">See Shipping Options</div> 
 
     </div> 
 
     <div class="stepShipping hidden"> 
 
     <h3>Shipping Options Go Here</h3> 
 
     <p>For now all shipping is free!</p> 
 
     <div class="btn submitShipping">Calculate Total</div> 
 
     </div> 
 
     <div class="stepTotal hidden"> 
 
     <h3>You're ready to checkout!</h3> 
 
     <div class="btn submitTotal">Checkout</div> 
 
     </div> 
 
     
 
     <form novalidate="novalidate" class="simple_form edit_order" id="edit_order_1" enctype="multipart/form-data" action="/orders/1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="6P1CzQgCx7JVXAJgVi2puDOHX/fJApgUBeFI24TAh+ZWXZ5MmQfpMqGsxcnJl4Z6vwYp8A0MbOer34CJDnv4UQ==" /> 
 

 
     <h4>Subtotal: $200.00</h4> 
 
     <input id="hfSubtotal" type="hidden" value="200.0" name="order[subtotal]" /> 
 

 
     <h4 class="hidden fieldTax"></h4> 
 
     <input id="hfTax" type="hidden" value="9.26" name="order[tax]" /> 
 

 
     <h4 class="hidden fieldShipping">Shipping: $</h4> 
 
     <input id="hfShipping" type="hidden" value="0.0" name="order[shipping]" /> 
 

 
     <h4 class="hidden fieldTotal"><strong>Total: $</strong></h4> 
 
     <input id="hfTotal" type="hidden" value="200.0" name="order[total]" /> 
 

 
</form>

任何人都可以看到我要去哪裏錯了嗎？

Answer 1

你在這裏遇到的問題是你試圖用「;」在每個值後，在第一個值上，它只是剎車線，並將始終給你200.00

var $total = parseFloat($subtotal).toFixed(2); + parseFloat($tax).toFixed(2); + parseFloat($shipping).toFixed(2); 

只是刪除那些「;」只是讓最後一個，像這樣改變它

var $total = (parseFloat($subtotal) + parseFloat($tax) + parseFloat($shipping)).toFixed(2); 

這將解決問題。