获取两个跨度内的数字并进行计算

Get the numbers inside two spans and do a calculation?

本文关键字：数字 计算 两个 获取      更新时间：2023-09-26

我正在使用一个wordpress插件，它将一些数字输出到span元素中。我想获取这些 span 元素的值并将一个元素与另一个元素分开，然后在网站上的某个地方显示结果。我对javascript了解不多，并且在网上尝试了一些示例，但无法让它们工作。谁能解释一下如何做到这一点？

另请注意，这些 span 元素没有自己的 ID，并且由于这是在插件中使用，所以我无法直接编辑它们，因此我需要像这样定位它们，以便单独定位每个跨度：

.container1 .tooltip span
.container2 .tooltip span

如果值没有小数，您可以使用parseInt()： 

var a = parseInt($('.container1 .tooltip span').text(), 10);
var b = parseInt($('.container2 .tooltip span').text(), 10);
console.log(a - b);

如果值包含小数，请使用parseFloat().toFixed(2);： 

var a = parseFloat($('.container1 .tooltip span').text()).toFixed(2);
var b = parseFloat($('.container2 .tooltip span').text()).toFixed(2);
console.log(a - b);

前缀+还可以将字符串编号"0"值更改为数字，而不是0这个"$0"。

var a = +$('.container1 .tooltip span').text();
var b = +$('.container2 .tooltip span').text();
console.log(a - b);

如果添加有关工具提示的详细信息，则可以回答更多问题。

您需要从每个元素中获取.value，然后使用这样的函数将它们除以，该函数将结果提供给新元素：

function divideBy() { 
    num1 = document.getElementById("firstNumber").value;
    num2 = document.getElementById("secondNumber").value;
    document.getElementById("result").innerHTML = num1 / num2;
}

查看此演示

您应该遵循以下代码片段：

  1. 收集值
  2. 和他们一起做点什么

function SumCtrl() {
  var resultView = document.getElementById('result');
  
  var values = (function(nodeList) {
    if(!nodeList) { return []; }
    var res = [];
    
    for (var i = nodeList.length >>> 0; i--;) { 
      res[i] = nodeList[i].textContent;
    }
    
    return res.map(function(i) { return Number(i) || 0; });
  })(document.querySelectorAll('div span'));
  
  resultView.innerHTML = values
    .reduce(function(a, b) {
      return a + b;
    });
};
document.addEventListener('DOMContentLoaded', SumCtrl);
<h1 id="result"></h1>
<div class="something">
  <span>1</span>
</div>
<div class="something1">
  <span>2</span>
</div>
<div class="something2">
  <span>3</span>
</div>
<div class="something3">
  <span>4</span>
</div>

相关文章：