Question

假设购物车网站，如果选择了商品，我显示加号减号按钮，数量和金额。

点击加号按钮，我正在更新数量和金额，如下所示

$(document).on("click", ".plus", function () {
  $(this).prev().text(parseInt($(this).prev().text()) + 1);
  var price = parseInt($(this).closest("ul").find("div.price").text());
  var quantity = parseInt($(this).closest("ul").find("i.qt").text());
  $(this).closest("ul").find("div.price").text(price + price);
});

我观察到Amount计算错误，它基于之前的值。

 <li class="prd-items-qt">
    <div class="col">
        <i class="minus"></i>
        <i class="qt">1</i>
        <i class="plus"></i>
    </div>
    <div class="col">

    </div>
    <div class="price">
        150
    </div>
</li>

Answer 1

您可能需要closest("li")而不是closest("ul")

您在树上找回第一个匹配项而不是单个项次列表太过分了。

此外，停止在选择器中浪费jQuery循环（通过添加临时变量）：

$(document).on("click", ".plus", function () {
    var $this = $(this);
    var $prev = $this.prev();
    var $li = $this.closest('li');
    $prev.text(parseInt($prev.text()) + 1);
    var price = parseInt($li.find("div.price").text());
    var quantity = parseInt($li.find("i.qt").text());
    $li.find("div.price").text(price + price);
});

这往往使代码更容易阅读：）

注意您可能想要：

$li.find("div.price").text(price * quantity);

Rory McCrossan在他的回答中进一步清理代码的麻烦，所以建议你按照他的指南进行阅读：）

Answer 2

您计算价格的逻辑不正确，因为您将数量乘以计算的价格，因此它将是150, 300, 600, 1200, 2400，依此类推，而不是150, 300, 450, 600。

您可以使用data-*属性来存储要乘的单价。试试这个：

$(document).on("click", ".plus", function () {
    var $container = $(this).closest('.prd-items-qt');
    var $quantity = $container.find('.qt');
    var $unitPrice = $container.find('div.price');
    var quantity = parseInt($quantity.text(), 10) + 1;
    var unitPrice = parseInt($unitPrice.data('unit-price'), 10);  
    $quantity.text(quantity);
    $unitPrice.text(quantity * unitPrice);
});

Example fiddle

Answer 3

看起来你需要一个完整的专栏。因为每次增加数量时，您的价格都会增加一倍。相反，你想做价格*数量：

$(document).on("click", ".plus", function () {
  var li = $(this).closest("li");
  $(this).prev().text(parseInt($(this).prev().text()) + 1);
  var price = parseInt(li.find("div.price").text());
  var quantity = parseInt(li.find("i.qt").text());

  li.find("div.total").text(price * quantity);
});

此外，您可以选择ul一次，然后重复使用，而不是每次需要访问其上的子项时找到它。

示例 - http://jsfiddle.net/5Ghp2/

Answer 4

我认为你应该寻找closest('li')而不是closest('ul')因为li位于点击元素的上层，而不是ul：

$(document).on("click", ".plus", function () {
  $(this).prev().text(parseInt($(this).prev().text()) + 1);
  var price = parseInt($(this).closest("li").find("div.price").text());
  var quantity = parseInt($(this).closest("li").find("i.qt").text());
  $(this).closest("li").find("div.price").text(price + price);
});

您可以以更易读的方式编写相同的代码，以便于调试：

$(document).on("click", ".plus", function () {
   var $quantityLi = $(this).prev();
    var quantity = parseInt($quantityLi.text());
    quantity+=1;

    $quantityLi.text(quantity);

    var $priceDiv = $(this).closest('li').find('.price');
    var price = parseInt($priceDiv.text());

    var totalPrice = price * quantity;
    $priceDiv.text(price+totalPrice);
});

JSFiddle Demo

在类单击事件文本被错误地更新

4 个答案: