Сумма с 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); 

Однако final_cpa всегда 0 и allfilled остается false.

Answer 1

Это потому, что метка не имеет атрибута value поэтому функция .val() всегда возвращает пустую строку, вы должны использовать .text() вместо того, чтобы получить содержимое текста внутри этикетки элемент:

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

Должно быть:

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

НЕ E: как Район, упомянутый в комментарии ниже 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.

И ваш 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

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>