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);

但是final_cpa始终为0而allfilled仍为false。

Answer 1

因为标签不具有value属性，因此.val()函数将始终返回空字符串，您必须使用.text()来获取内部的文本内容标签元素：

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

应该是：

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

注意：正如下面评论中提到的 Rayon text()将始终返回string所以最好将条件中的零更改为字符串{ {1}}。

希望这有帮助。

＆＃13;

'0'

＆＃13;

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();

＆＃13;

Answer 2

检查$(this).text() != ""而不是$(this).val() != 0，因为您无法使用.val()获取标签文字。 .text(）会为您提供标签文字

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

Answer 3

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

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 4

更改

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

到

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

Answer 5

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

你的allfilled varibale毫无意义，因为如果.tmpcpa的最后一个元素为空，那么它将再次为假。所以我删除了它。

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点
使用length lable-elements来测试所有标签是否都有值!== 0

＆＃13;

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();

＆＃13;

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

＆＃13;

总结jquery无法正常工作

6 个答案: