javascript - 输入变化更新价格div

Question

所以基本上我想做的是一个简单的购物车更新，总价格和数量变化 ->价格更新。我遇到了一个无法解决的问题，jQuery 不是我的语言，但我了解它的基本原理。

如果您能告诉我在该代码中我做错了什么，以及如果总价能够使用两个不同的商品和数量进行更新，我将来应该考虑什么，我将不胜感激。

<table cellspacing="2" cellpadding="0" border="0" width="280">
    <tr>
        <td width="140" valign="top" align="left"><div class="product_name">T-shirt, Black XS</div><div class="product_serial">Art.nr: <a href="javascript:void(0);">#TS4502-BL</a></td>
        <td width="30" valign="top" align="center"><input type="text" id="quantity" value="1" maxlength="2" /></td>
        <td width="80" valign="top" align="center"><div class="product_total_cost" id="price" value="199">199 kr</div></td>
        <td width="9" valign="top" align="right"><div class="remove_product">X</div></td>
    </tr>
</table>

<table cellspacing="2" cellpadding="0" border="0" width="280">
    <tr>
        <td width="110" valign="middle"><div class="procental_off">-10%</div><div class="cart_total_cost" id="total"> 358,2 kr</div></td>
        <td width="70" valign="middle" align="center"><div class="cart_clear">Rensa</div></td>
        <td width="100" valign="top" align="right"><div class="cart_continue">Fortsätt</div></td>
    </tr>
</table>

通过我在互联网上找到的以下 jQuery 代码，并尝试使其与我的代码一起工作。

<script type="text/javascript">
    $('#quantity').change(function(event) {
        $('#price').html($('#quantity').val()* $('#price').val());
    }); 
</script>

Answer 1

#price 是一个 div，没有值(即使输入它也是无效的)

您可能需要考虑这样的事情

$('#quantity').change(function (event) {
    $('#price').html($(this).val() * parseInt($('#price').text(), 10));
      // parseInt converts in this case strings to integers
});

编辑:现在的问题是你必须重置价格......一开始没有看到

http://jsfiddle.net/Spokey/8hfxU/1/

<小时/>

新:例如，您可以将价格存储在 data-* 属性中并从那里检索它

http://jsfiddle.net/Spokey/8hfxU/2/

<div class="product_total_cost" id="price" data-val="199">199 kr</div>

和脚本

$('#quantity').change(function (event) {
    $('#price').html($(this).val() * parseInt($('#price').attr('data-val'), 10));
});