使用jquery求和不起作用

Question

我有很多标签，如页面上所示。我想对这些值求和并将它们存储在final_cpa中。

HTML:

<label class="tmpcpa">32.1</label>

JS:

function calculate_final_cpa() {
        var final_cpa = 0;
        var allfilled = false;
        $('.tmpcpa').each(function () {
            if ($(this).val() != 0) {
            final_cpa += parseInt($(this).text()) || 0;
            allfilled = true;
            } else {
                allfilled = false;
            }
        });
             console.log(final_cpa); 
             console.log(allfilled);
    }
    var run = setInterval(calculate_final_cpa, 500);

然而，CCD_ 2始终为0并且CCD_ 3保持为CCD_ 4。

Answer 1

因为label没有value属性，所以.val()函数总是返回一个空字符串，所以必须使用.text()来获取label元素内的文本内容：

if ($(this).val() != 0) {

应为：

if ($(this).text() != 0) {

注意：正如下面注释中提到的Rayon，text()将始终返回string，因此最好将条件中的零更改为字符串'0'。

希望这能有所帮助。

function calculate_final_cpa() {
  var final_cpa = 0;
  var allfilled = false;
  $('.tmpcpa').each(function () { 
    if ($(this).text() != '0') {
      final_cpa += parseInt($(this).text()) || 0;
      allfilled = true;
    } else {
      allfilled = false;
    }
  });
  console.log(final_cpa); 
  console.log(allfilled);
}
calculate_final_cpa();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>

Answer 2

检查$(this).text() != ""而不是$(this).val() != 0，因为不能使用.val()获取标签文本。.text(）会给你标签的文本

if ($(this).text() != "" && $(this).text() != "0") { 
....
}

Answer 3

首先，您需要使用.text()而不是.val()来获取标签中的文本。此外，如果您希望结果包含十进制数字，则需要使用parseFloat()：

function calculate_final_cpa() {
        var final_cpa = 0;
        var allfilled = false;
        $('.tmpcpa').each(function () {
            if ($(this).text() != 0) {
            final_cpa += parseFloat($(this).text()) || 0;
            allfilled = true;
            } else {
                allfilled = false;
            }
        });
        console.log(final_cpa); 
        console.log(allfilled);
}
calculate_final_cpa();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<br />
<label class="tmpcpa">32.1</label>

Answer 4

更改

if ($(this).val() != 0) 

到

if (parseInt($(this).text()) != 0)

Answer 5

除了您的代码有错误外，您还应该在解析它们之前检查表的内容。因为您在示例中使用了小数，所以也应该从parseInt切换到parseFloat。

您的final_cpa0变量没有意义，因为如果.tmpcpa的最后一个元素为空，它将再次为false。所以我删除了它。

function calculate_final_cpa() {
    var final_cpa = 0;
    $('.tmpcpa').each(function () {
        var content = $(this).text();
        final_cpa += IsNumeric(content) ? parseFloat(content) : 0;
    });
    console.log(final_cpa); 
}

Answer 6

• 用.text而不是val()测试，因为label没有value属性
• 使用Unary plus(+)/Number运算符而不是parseInt，因为parseInt将忽略floating点
• 使用allfilled1的length来测试是否所有标签都有值!== 0

function calculate_final_cpa() {
  var final_cpa = 0;
  var countOfFilled = 0;
  $('.tmpcpa').each(function() {
    if ($(this).text() !== '0') {
      final_cpa += +($(this).text()) || 0;
      ++countOfFilled;
    }
  });
  console.log('Total:  ' + final_cpa);
  console.log('All filled  ' + $('.tmpcpa').length === countOfFilled);
}
calculate_final_cpa();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">32.1</label>
<label class="tmpcpa">0</label>