Question

所以基本上我要做的是简单的购物车更新，总价格和数量变化 - ＆gt;价格更新。我遇到了一个我无法解决的问题，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));
});

Answer 2

您无法将<div> value属性定位为val()，因为它不是输入。如果您想保留value属性，请按以下步骤进行定位：

$("#price").attr("value")

这样可以保持当前的SEK kr而不会出现问题。

HTML：

<input type="text" id="quantity" /><div id="price" value="199">199 kr</div>

的Javascript（jQuery的）：

$(function() {

    $("#quantity").on("change keyup paste", function () {

        $("#price").html((parseInt($("#quantity").val())*parseInt($("#price").attr("value"))) + " kr");

    });

});

工作jsfiddle，here。

请注意change keyup paste。如果您只进行更改，则仅在焦点离开输入框时才会触发事件。

Answer 3

您应该使用以下代码：

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

我使用parseFloat的原因是解析值（默认情况下在Javascript / Jquery中被视为字符串）。因此需要将其解析为float，以便可以对解析的值执行数学运算。您也可以使用parseInt将值转换为integer

Answer 4

你需要考虑你的逻辑是什么，并考虑你的标记。首先，您不能在页面中使用重复的ID，因此如果您在页面设置中有多个产品，那么您将遇到问题。其次，div #price不能有值，因为它不是div的正确属性。鉴于此，您必须将文本转换为整数，以便它可以相乘 -

 $('#quantity').change(function(event) {
     console.log('foo');
        $('#price').html($('#quantity').val()* parseInt($('#price').text()));
    });

http://jsfiddle.net/J54n9/

Answer 5

这将有效：

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

输入更改更新价格div

5 个答案: