jQuery僅循環其中具有值的那些輸入

Question

我試圖遍歷表單字段並添加每個輸入的值，並在另一個div中顯示總計。 僅當我填寫所有表單字段時，它才對我有用。 如果僅在2個表單字段中有值，如何使它起作用？

HTML：

<ul class="nav tabs " id="calculate">
      <li class="active"><input type="text" class="col-sm-3 pull-right" id="right-input"></li>
      <li><a href="#tab2" data-toggle="tab">    <input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab3" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab4" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab5" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab6" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab7" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab8" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab9" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
      <li><a href="#tab10" data-toggle="tab"><input type="text" class="col-sm-3 pull-right" id="right-input"></a></li>
</ul>

JS：

$(document).ready(function() 
{
    $("input").keyup(function() 
    {
        var $inputs = jQuery('#calculate :input');
        var values = {};
        var total = 0;
        $inputs.each(function() 
        {
            if(values[this.name] !== "") 
            {
                total = parseFloat(total) + parseFloat(values[this.name]);
            }
            if(total)
        });
        console.log(total);
    });
});

Answer 1

您可以在循環前過濾輸入，這將為您提供值不為空的輸入。

 var $inputs = jQuery('#calculate :input').filter(function(){return this.value !==''});

Answer 2

您只需在您的each()循環中進行一些更改，如下所示：

$inputs.each(function () {
         if ($(this).val() !== "") {
             total = parseFloat(total) + parseFloat($(this).val());
         }  
     });

現場演示

Answer 3

您需要更改匯總值的方式，請嘗試以下操作：

var value = !isNaN(Number(values[this.name])) ? parseFloat(values[this.name]) : 0;
total += value;