2つの入力間の計算と別の結果の比較

Question

以下のスクリプトは、数量を入力すると最初のブロックに対してのみ機能します。

数量が入力されたブロックに応じて計算が実行される方法はありますか。

$(document).ready(function() { 
 
$('.somente-numero').keyup(function (e) { 
 
\t $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
 
\t var v1 = Number(document.getElementById("v1").value); 
 
    var v2 = Number(document.getElementById("v2").value); 
 
    var v7 = document.getElementById("v7").value = parseFloat(v1 * v2).toFixed(2); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- bloco 1 --> 
 
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly /> 
 

 
<br> 
 

 
<!-- bloco 2 --> 
 
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly /> 
 

 
<!-- bloco 3 --> 
 

 
................. 
 

 
<!-- bloco n -->

Answer 1

このスクリプトを使用して、コードを更新してください。

$(document).ready(function() { 
     $('.somente-numero').keyup(function (e) { 
       var currentVal = $(this).val(); 
       var replaceD = currentVal.replace(/[^0-9\.]/g, ''); 
       $(this).val(replaceD); 
       var v1 = Number($(this).prev().prev().val()); 
       var v2 = Number($(this).val()); 
       var calculatedval = parseFloat(v1 * v2).toFixed(2); 
       $(this).next().next().val(calculatedval); 
      }); 
     }); 

Answer 2

あなたは一般的なクラス（たとえば、.bloco）の下で、あなたの共通ブロックを維持することができます。次に、最も近い.blocoを見つけ、.input1、.input2、.input3を見つけてください。

$(document).ready(function() { 
 
$('.somente-numero').keyup(function (e) { 
 
    $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
 
    $elBloco = $(this).closest('.bloco'); 
 
    var v1 = Number($elBloco.find('.input1').val()); 
 
    var v2 = Number($elBloco.find('.input2').val()); 
 
    var v7 = $elBloco.find('.input3').val(parseFloat(v1 * v2).toFixed(2)); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- bloco 1 --> 
 
<div class="bloco"> 
 
    <label>preço</label> <input type="text" class="somente-numero input1" name="produto_solicitado[0][valor_org]" size="10" value="100.00"/> 
 
    <label>quantidade</label> <input type="text" class="somente-numero input2" name="produto_solicitado[0][quantidade]" size="10"/> 
 
    <label>total</label> <input type="text" class="input3" name="produto_solicitado[0][valor_total_prod]" size="10" readonly /> 
 
</div> 
 

 
<br> 
 

 
<!-- bloco 2 --> 
 
<div class="bloco"> 
 
    <label>preço</label> <input type="text" class="somente-numero input1" name="produto_solicitado[1][valor_org]" size="10" value="200.00"/> 
 
    <label>quantidade</label> <input type="text" class="somente-numero input2" name="produto_solicitado[1][quantidade]" size="10"/> 
 
    <label>total</label> <input type="text" class="input3" name="produto_solicitado[1][valor_total_prod]" size="10" readonly /> 
 
</div> 
 
<!-- bloco 3 --> 
 

 
................. 
 

 
<!-- bloco n -->

Answer 3

更新のみjavascriptを、この方法を試してください。

$(document).ready(function() { 
 
$('.somente-numero').keyup(function (e) { 
 
\t $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
 
\t var _id = $(this).attr('id'); 
 
    var result = 1.0; 
 
    $('input[id^='+_id.charAt(0)+']').each(function(i, el){ 
 
    if ($(el).val().length != 0){ 
 
     result *= Number($(el).val()); 
 
    } 
 
}); 
 
result = parseFloat(result).toFixed(2); 
 
$('#'+_id.charAt(0)+'7').val(result); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- bloco 1 --> 
 
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly /> 
 

 
<br> 
 

 
<!-- bloco 2 --> 
 
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly /> 
 

 
<!-- bloco 3 --> 
 

 
................. 
 

 
<!-- bloco n -->