Простая сумма jquery

Question

У меня есть неизвестное количество полей ввода, имеющих класс «добавить». Я просто хочу суммировать их с jquery, не знаю, где я ошибаюсь.

<input name="add" class="add" type="text"> 
<input name="add" class="add" type="text"> 
<input name="add" class="add" type="text"> 
<input name="add" class="add" type="text"> 

<input type="button" value="" onClick="add()" /> 

`

function add(){ 
     val = 0; 
     $(".add").each(function() {  
      str = (parseInt(this.value)) 
      sum=str+str 
     }); 
     alert (sum) 
    } 

`

Answer 1

Вы никогда фактически добавлять материал в sum:

function add() { 
    var sum = 0; 
    $(".add").each(function() { 
     sum += +this.value; 
    }); 
    return sum; // an add function shouldn't really "alert" 
} 

Если намерение состоит в том, чтобы поддерживать только целые числа, используйте parseInt(this.value, 10) [обратите внимание на параметр базисное] вместо +this.value:

function add() { 
    var sum = 0; 
    $(".add").each(function() { 
     var str = this.value.trim(); // .trim() may need a shim 
     if (str) { // don't send blank values to `parseInt` 
      sum += parseInt(str, 10); 
     } 
    }); 
    return sum; 
} 

См. http://jsfiddle.net/alnitak/eHsJP/

Answer 2

function add(){ 
    var sum = 0; 
    $(".add").each(function() { 
     var val = parseInt($(this).val(), 10) 
     sum += (!isNaN(val) ? val : 0); 
    }); 
    alert(sum); 
} 

Edit: Острые глаза, есть круглые скобки ... =) И пространство.

Answer 3

Если вам не нужна поддержка IE8, вы можете использовать собственный Javascript Array.prototype.reduce() способ. Вам нужно будет преобразовать объект JQuery в массив первого:

function add() { 
    return $('.add').toArray().reduce(function(sum,element) { 
     return sum + Number(element.value); 
    }, 0); 
} 

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce