当我在文本框中键入数字时，<p>中的数字应该与文本框中输入的数字相乘</p>

Question

在我的购物车页面中，产品在我的div框中显示如下：

产品会生成并显示在用户添加的购物车中。

购物车页面可以包含任意数量的产品。

当用户在文本框中键入数字，然后点击更新按钮时，该数字应乘以<p class="price2"></p>的价格，并将其替换为<p class="price2"></p>内的新总金额

假设用户在文本框中键入“3”，然后按下按钮。那应该是 "3 * 699 = 2097"和2097应该替换699，因此它会显示“total: 2097"。

我要理解的难点是，这应该发生在特定的产品div盒上，因此其他产品不会受到影响。我的意思是我不能使用类或id从<p>获取文本，我需要使用父级？因为每个产品都有<p class="price2">，我不想更改所有产品价格。

如果有人能帮助我，我将不胜感激

Here is my jsfiddle

此外，还有另一个jquery，我在同一个更新按钮上使用它来获取所有价格并总结它们。

<script type="text/javascript">
    $(document).ready(function () {
        $('.update').click(function () {
            var total = 0;
            $("span.price2").each(function (i) {
                total += parseFloat($(this).text(), 10);
            });

            $("#total2").html(total);
        });
    });
</script>

Answer 1

你可以使用按键事件，看起来更漂亮，不得不点击。

<span class="section">
  <p class="price">699.50</p>
  <input class="qtty" type="text">
  <span class="result">699.50</span>
</span>

<span class="section">
  <span class="price">1234</span>
  <input class="qtty" type="text">
  <span class="result">1234</span>
</span>

$('.qtty').keypress(function() {
  price = $(this).parent().find('.price').html()
  qtty = $(this).parent().find('.qtty').val()
  result = price * qtty
  $(this).parent().find('.result').html(result)
});​

只是一个建议。编辑：http://jsfiddle.net/qU7ZG/更好。

Answer 2

使用context参数到jQuery选择器来查找特定DIV中的类成员：

var total = 0;
$(".produktinfo2").each(function () {
    var that = $(this);
    var subtotal = parseFloat($(".quantity", that).text()) * parseFloat($(".price", that).text());
    $(".price2", that).text(subtotal);
    total += subtotal;
});
$("#total2").text(total);