时间戳

首页 > 解决方案 > Javascript：不要对不可见的元素求和

javascript - Javascript：不要对不可见的元素求和

问题描述

我正在尝试汇总 HTML 元素中的值列表，但我想排除值是使用纯 JS 隐藏的值。

HTML：

<div class="grams">1</div>
<div style="display: none;">
  <div class="grams">2</div>
</div>
<div class="milligrams">100</div>
<div class="milligrams">2</div>
<br>
<div>Total:</div>
<div class="servings"></div>

JS：

window.addEventListener('load', function() {
  let gramdivs = document.getElementsByClassName("grams");
  let milligramdivs = document.getElementsByClassName("milligrams");
  var total = 0;
  for (let item of gramdivs) {
    let itemPrice=parseFloat(item.textContent);
    total += itemPrice;
  }
  for (let item of milligramdivs) {
    let itemPrice=parseFloat(item.textContent);
    total = total + itemPrice / 1000;
  }
  document.getElementsByClassName("servings")[0].innerText = total.toFixed(3);
})

https://jsfiddle.net/smhok7yd/2/

在 JS Fiddle 中，您可以看到所有数字都被添加，包括隐藏的数字。

正确的输出应该是 1.102。

请注意，我无法更改 HTML 的层次结构。

我对 JS 比较陌生，整天都在努力寻找解决方案。

标签： javascript

解决方案

迭代元素时，检查它们的offsetParent是否null- 如果是，它们不可见：

const getClassValues = (className, multiplier = 1) => [...document.getElementsByClassName(className)]
  .filter(elm => elm.offsetParent !== null)
  .reduce((a, b) => a + (b.textContent * multiplier), 0);

document.querySelector('.servings').textContent = (
  getClassValues('grams') + getClassValues('milligrams', 0.001)
);
<div class="grams">1</div>
<div style="display: none;">
  <div class="grams">2</div>
</div>
<div class="milligrams">100</div>
<div class="milligrams">2</div>
<br>
<div>Total:</div>
<div class="servings"></div>

推荐阅读