jQuery double。各ループの論理的な問題を解決するのに役立ちます

Question

私はいくつかの計算を解決する必要があり、私は.each()ループを使用しています。行<tr>を動的に入れるので、テーブルをループするのに.each()を使用しますが、値をvatの値でソートする必要があります。

function callSum(id) { 
 
    var counter = 1; 
 
    var sum = document.getElementById("sum" + id).value; 
 
    var vat = document.getElementById("vat" + id).value; 
 

 
    $('.sumall').each(function() { 
 

 
     $('.vatall').each(function() { 
 
      if ($(this).val() == 0) { //if value of VAT is 0 sum it to vatTotalZero 
 
       document.getElementById("vatTotalZero").value = $(this, ".sumall").val; // don't know how to solve this 
 
      } else { //if value of VAT is > 0 sum it to vatTotal 
 
       document.getElementById("vatTotal").value = $(this, ".sumall").val; // don't know how to solve this 
 
      } 
 
      counter++; 
 
     }); 
 

 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<tr> 
 
    <td class="col-sm-1"> 
 
    <input type="text" name="sum[]" id="sum1" onfocus="callSum(1)" class="sumall form-control"/> 
 
    </td> 
 
    <td class="col-sm-1"> 
 
    <input type="text" name="vat[]" id="vat1" class="vatall form-control "/> 
 
    </td> 
 
</tr> 
 

 
<br><br> 
 
<label>All Sums without VAT (vat 0)</label> 
 
<input type="text" name="vatTotalZero" id="vatTotalZero" class="form-control "/> 
 

 
<br><br> 
 
<label>All Sums with VAT (vat > 0)</label> 
 
<input type="text" name="vatTotal" id="vatTotal" class="form-control "/>

Answer 1

ソースコードにdisrciptiveコメントを参照してください。

function callSum(id) { 
 

 
    var counter = 1, 
 
     sum = document.getElementById("sum" + id).value, 
 
     vat = document.getElementById("vat" + id).value, 
 
     sumallVal; 
 

 
    $('.sumall').each(function() { 
 

 
     /* get the value */ 
 
     sumallVal = $(this).val(); 
 

 
     $('.vatall').each(function() { 
 

 
      if ($(this).val() == 0) { //if value of VAT is 0 sum it to vatTotalZero 
 

 
       //document.getElementById("vatTotalZero").value = $(this, ".sumall").val; // don't know how to solve this 
 
       /* set the value */ 
 
       $("#vatTotalZero").val(sumallVal) 
 

 
      } else { //if value of VAT is > 0 sum it to vatTotal 
 

 
       //document.getElementById("vatTotal").value = $(this, ".sumall").val; // don't know how to solve this 
 
       /* set the value */ 
 
       $("#vatTotal").val(sumallVal) 
 

 
      } 
 

 
      counter++; 
 

 
     }); 
 

 
    }); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<tr> 
 
    <td class="col-sm-1"> 
 
     <!-- <input type="text" name="sum[]" id="sum1" onfocus="callSum(1)" class="sumall form-control" /> --> 
 
     <input type="text" name="sum[]" id="sum1" onchange="callSum(1)" class="sumall form-control" /> 
 
    </td> 
 
    <td class="col-sm-1"> 
 
     <input type="text" name="vat[]" id="vat1" class="vatall form-control " /> 
 
    </td> 
 
</tr> 
 
<br> 
 
<br> 
 
<label>All Sums without VAT (vat 0)</label> 
 
<input type="text" name="vatTotalZero" id="vatTotalZero" class="form-control " /> 
 
<br> 
 
<br> 
 
<label>All Sums with VAT (vat > 0)</label> 
 
<input type="text" name="vatTotal" id="vatTotal" class="form-control " />

は、ここでは、拡張バージョンで行きます。
このバージョンでは、私は少しを、未使用のものを取り外し、適切なイベントハンドラを設定し、構文を短縮

function callSum(id) { 
 

 
    var sum = document.getElementById("sum" + id).value, 
 
     vat = document.getElementById("vat" + id).value, 
 
     sumallVal; 
 

 
    $('.sumall').each(function() { 
 

 
     /* get the value */ 
 
     sumallVal = $(this).val(); 
 

 
     $('.vatall').each(function() { 
 

 
      /* set the value */ 
 
      $($(this).val() == 0 ? "#vatTotalZero" : "#vatTotal").val(sumallVal) 
 

 
     }); 
 

 
    }); 
 

 
} 
 

 

 
$(document).ready(function() { 
 

 
    $('.sumall.form-control').on('input', function() { 
 
     // get number id directly from string id by deleting all non numbers 
 
     callSum(this.id.replace(/[^0-9]/gi, '')); 
 
    }) 
 

 
});

<tr> 
 
    <td class="col-sm-1"> 
 
     <!-- <input type="text" name="sum[]" id="sum1" onfocus="callSum(1)" class="sumall form-control" /> --> 
 
     <input type="text" name="sum[]" id="sum1" class="sumall form-control" /> 
 
    </td> 
 
    <td class="col-sm-1"> 
 
     <input type="text" name="vat[]" id="vat1" class="vatall form-control " /> 
 
    </td> 
 
</tr> 
 
<br> 
 
<br> 
 
<label>All Sums without VAT (vat 0)</label> 
 
<input type="text" name="vatTotalZero" id="vatTotalZero" class="form-control " /> 
 
<br> 
 
<br> 
 
<label>All Sums with VAT (vat > 0)</label> 
 
<input type="text" name="vatTotal" id="vatTotal" class="form-control " /> 
 

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