javascript - 添加输入，乘以价格，显示总计

Question

我正在尝试为在线 T 恤订单表单创建一个非常简单的 PHP 表单。除了最后的计算，我几乎把所有东西都记下来了。我希望将尺寸相加，乘以价格（比如说 10.00 美元），然后显示总数。目前只显示总量。

我知道我错过了乘法步骤，但我尝试的一切都失败了。如果你能给我一些方向，那就太好了。谢谢

http://jsfiddle.net/hSxkW/14/

形式：

<div>
<input name=S />
<input name=M />
<input name=L />
<input name=XL />
<input name=XXL />
<input name=XXXL /><br>
Total: $<span class=size></span>
</div>

JS：

$('input[name=S], input[name=M], input[name=L], input[name=XL], input[name=XXL], input[name=XXXL]').keyup(function() {
    var divParent = $(this).closest('div');
    var S = $('input[name=S]', divParent).val()-0;
    var M = $('input[name=M]', divParent).val()-0;
    var L = $('input[name=L]', divParent).val()-0;;
    var XL = $('input[name=XL]', divParent).val()-0;
    var XXL = $('input[name=XXL]', divParent).val()-0;
    var XXXL = $('input[name=XXXL]', divParent).val()-0;
    if (S >= 0 && M >= 0 && L >= 0 && XL >= 0 && XXL >= 0 && XXXL >= 0)
        $('span.size', divParent).text(S+M+L+XL+XXL+XXXL);
});

Answer 1

对我来说似乎很基本。

改变：

if (S >= 0 && M >= 0 && L >= 0 && XL >= 0 && XXL >= 0 && XXXL >= 0) $('span.size', divParent).text(S+M+L+XL+XXL+XXXL);

至：

if (S >= 0 && M >= 0 && L >= 0 && XL >= 0 && XXL >= 0 && XXXL >= 0) $('span.size', divParent).text(10*(S + M + L + XL + XXL + XXXL));

jsFiddle 示例

Answer 2

我会做这样的事情：

<div id="orderContainer">
   <input data-price="{priceS}" data-oldprice="0" name=S />
   <input data-price="{priceM}" data-oldprice="0" name=M />
   <input data-price="{priceL}" data-oldprice="0" name=L />
   <input data-price="{priceXL}" data-oldprice="0" name=XL />
   <input data-price="{priceXXL}" data-oldprice="0" name=XXL />
   <input data-price="{priceXXXL}" data-oldprice="0" name=XXXL /><br>
   Total: $<span class="size">0</span>
</div>

<script>
    jQuery(function($){
       var container = $("#orderContainer");
       container.find("input").keyup(function(){
           var item = $(this);
           var totalspan = container.find("span.size");
           var price = parseInt(item.data("price"))*parseInt(item.val());
           var oldprice = parseInt(item.data("price"))*parseInt(item.data("oldprice"));
           var totalprice = parseInt(totalspan.html());
           item.data("oldprice", price);
           totalspan.html(totalprice-oldprice+price);
       });
    });
</script>

您如何将价格添加到投入中 - 完全取决于您。