主页 / 问题 / 1336658
Accepted
Max Watson
Asked:2022-10-10 00:41:01 +0800 CST2022-10-10 00:41:01 +0800 CST

如何计算块中的金额

  • 772

大家好！

请帮忙解决问题。

我需要计算所有的总和span。我无法单独获得每个数字。你能告诉我有什么方法可以做到这一点吗？提前致谢！

let total = 0;
// Преобразую сроку в число
let price = parseInt($('.list > p > .price').text())

//Но на выходе получаются 345
console.log(price)

//Вывожу в html
$('.total').html("Сумма " + (total + price))
<div class='list'>
  <p>Цена <span class="price">3</span></p>
  <p>Цена <span class="price">4</span></p>
  <p>Цена <span class="price">5</span></p>
  <div class="total"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

javascript

2 个回答

  1. 我不是 jQuery 专家。在纯 JS 中，我会这样做：

    const prices = [...document.querySelectorAll('span.price')]
const res = prices.reduce((acc, el) => {
  acc += +el.textContent
  return acc
}, 0)

document.querySelector('.total').textContent = 'Сумма ' + res
    • 1
  2. Best Answer

    不带参数的方法text- 返回调用它的上下文中 jQuery 集合的所有元素的组合文本内容。
    在这种情况下，这就是值'345'（该方法从元素中获取其内容的行'3', '4', '5'- 并将它们连接成一行）。

    对集合的元素求和（数组并转换为数据数组），在 JS 中，通常使用该方法reduce：

    const total = $('.list > p > .price').toArray().reduce(
  (rslt, el) => rslt + parseInt($(el).text())    // или rslt + +($(el).text())
, 0); 
$('.total').text('Сумма ' + total); 
    <div class="list">
  <p>Цена <span class="price">3</span></p>
  <p>Цена <span class="price">4</span></p>
  <p>Цена <span class="price">5</span></p>
  <div class="total"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    jQuery 有map类似于each标准对象方法的方法Array，但没有类似于标准的方法reduce。因此，我们使用toArray.

    • 1

相关问题