jQuery-通过数据属性求和

问题描述 投票:0回答:2

我想用sum来计算所有计算出的总数,但是代码仅正确地将data-id求和,并且似乎为data-id="active"计算了一个随机值。正确的值应该是1550。

data-id="pending"
$(document).ready(function() {
  $('[data-id="active"]').each(function() {
    const item = $(this);
    var qty = item.find(".sold").text();
    var price = item.find(".cost").text();
    var total = Number(qty) * Number(price);
    item.find(".total").text(total);
    var sum = 0;
    $(".total").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#active_total").text(sum);
    });
    item.find(".total").text(total);
  });
  $('[data-id="pending"]').each(function() {
    const item = $(this);
    var qty = item.find(".sold").text();
    var price = item.find(".cost").text();
    var total = Number(qty) * Number(price);
    item.find(".total").text(total);
    var sum = 0;
    $(".total").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#pending_total").text(sum);
    });
    item.find(".total").text(total);
  });
});
.item {
  border: 1px solid
}

.total {
  font-weight: 900
}
jquery
2个回答
0
投票

[通过在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Active: <div class="item" data-id="active"> <div class="sold">10</div> <div class="cost">5</div> <div class="total">0</div> </div> <div class="item" data-id="active"> <div class="sold">20</div> <div class="cost">30</div> <div class="total">0</div> </div> Pending: <div class="item" data-id="pending"> <div class="sold">10</div> <div class="cost">100</div> <div class="total">0</div> </div> <div class="item" data-id="pending"> <div class="sold">22</div> <div class="cost">25</div> <div class="total">0</div> </div> Active: <div id="active_total">0</div> Pending: <div id="pending_total">0</div>上运行循环来计算sum时。而不是直接在.total上运行循环,应该在.total上运行循环。

因此,对于.total under data-id="active/pending",您的循环将为active,对于待处理的总计,您的循环将为$('[data-id="active"]').find(".total")

请参见下面的摘录:

$('[data-id="pending"]').find(".total")
$(document).ready(function() {
  $('[data-id="active"]').each(function() {
    const item = $(this);
    var qty = item.find(".sold").text();
    var price = item.find(".cost").text();
    var total = Number(qty) * Number(price);
    item.find(".total").text(total);
    var sum = 0;
    $('[data-id="active"]').find(".total").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#active_total").text(sum);
    });
    item.find(".total").text(total);
  });
  $('[data-id="pending"]').each(function() {
    const item = $(this);
    var qty = item.find(".sold").text();
    var price = item.find(".cost").text();
    var total = Number(qty) * Number(price);
    item.find(".total").text(total);
    var sum = 0;
    $('[data-id="pending"]').find(".total").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#pending_total").text(sum);
    });
    item.find(".total").text(total);
  });
});
.item {
  border: 1px solid
}

.total {
  font-weight: 900
}

解决方案2

您不应该在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Active: <div class="item" data-id="active"> <div class="sold">10</div> <div class="cost">5</div> <div class="total">0</div> </div> <div class="item" data-id="active"> <div class="sold">20</div> <div class="cost">30</div> <div class="total">0</div> </div> Pending: <div class="item" data-id="pending"> <div class="sold">10</div> <div class="cost">100</div> <div class="total">0</div> </div> <div class="item" data-id="pending"> <div class="sold">22</div> <div class="cost">25</div> <div class="total">0</div> </div> Active: <div id="active_total">0</div> Pending: <div id="pending_total">0</div>上运行循环。您已经在.totaldata-id=active上运行循环。仅计算该循环中的总数。

请参见下面的摘录:

data-id=pending
$(document).ready(function() {
var activeTotal = 0;
var pendingTotal = 0;
  $('[data-id="active"]').each(function() {
    const item = $(this);
    var qty = item.find(".sold").text();
    var price = item.find(".cost").text();
    var total = Number(qty) * Number(price);
    item.find(".total").text(total);
    activeTotal += parseInt(item.find(".total").text());
    /*var sum = 0;
     $('[data-id="active"]').find(".total").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#active_total").text(activeTotal);
    });*/
      $("#active_total").text(activeTotal);
    item.find(".total").text(total);
  });
  $('[data-id="pending"]').each(function() {
    const item = $(this);
    var qty = item.find(".sold").text();
    var price = item.find(".cost").text();
    var total = Number(qty) * Number(price);
    item.find(".total").text(total);
    pendingTotal += parseInt(item.find(".total").text());
    /*var sum = 0;
    $('[data-id="pending"]').find(".total").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#pending_total").text(sum);
    });*/
      $("#pending_total").text(pendingTotal);
    item.find(".total").text(total);
  });
});
.item {
  border: 1px solid
}

.total {
  font-weight: 900
}

0
投票

您正在重用已出售的以及成本和总计类别。未完成将所有类别的总和增加1550 + 650 = 2200。

© www.soinside.com 2019 - 2024. All rights reserved.