jQuery-按数据属性求和

时间：2019-11-27 19:28:59

标签： jquery

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

$(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
}
<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>

2 个答案:

答案 0 :(得分：1)

在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
}
<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>

解决方案2

您不应在.total上运行循环。您已经在data-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
}
<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>

答案 1 :(得分：1)

您正在重用已出售的以及成本和总计类别。待定会添加所有类别1550 + 650 = 2200。

$(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(".soldp").text();
    var price = item.find(".costp").text();
    var total = Number(qty) * Number(price);
    item.find(".totalp").text(total);
    var sum = 0;
    $(".totalp").each(function() {
      sum += parseInt(
        $(this)
        .text()
        .replace(",", "")
      );
      $("#pending_total").text(sum);
    });
    item.find(".totalp").text(total);
  });
});
.item {
  border: 1px solid
}

.total {
  font-weight: 900
}
.totalp {
  font-weight: 900
}
<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="soldp">10</div>
  <div class="costp">100</div>
  <div class="totalp">0</div>
</div>
<div class="item" data-id="pending">
  <div class="soldp">22</div>
  <div class="costp">25</div>
  <div class="totalp">0</div>
</div>
Active:
<div id="active_total">0</div>
Pending:
<div id="pending_total">0</div>

相关问题
最新问题