JQueryを使用して異なる入力に同じ計算を適用する

Question

同じ計算を異なるフィールドに適用する簡単なHTML/jqueryを作成しようとしています。

<h1>Multiplication by line</h1> 
<table> 
    <tr> 
    <td>Number 1</td> 
    <td>Number 2</td> 
    <td>Result</td> 
    </tr> 
    <!-- LINE ITEM START --> 
    <div class="lineitem"> 
    <tr> 
     <td> 
     <input type="number" name="a" class="a" value="" /> 
     </td> 
     <td> 
     <input type="number" name="b" class="b" value="" /> 
     </td> 
     <td> 
     <div class="total">0 </div> 
     </td> 
    </tr> 
    </div> 
    <!-- LINE ITEM END --> 
    <div class="lineitem"> 
    <tr> 
     <td> 
     <input type="number" name="a" class="a" value="" /> 
     </td> 
     <td> 
     <input type="number" name="b" class="b" value="" /> 
     </td> 
     <td> 
     <div class="total">0</div> 
     </td> 
    </tr> 
    </div> 

とjQuery：

私は、次のHTMLにまで問題を単純化している

$(document).ready(function() { 

    $(".lineitem").each(function() { 

    function compute() { 

     var a = $('.a').val(); 
     var b = $('.b').val(); 
     var total = (a * b); 

     $('.total').text(total); 

    } 

    $('.b, .a').change(compute); 

    }) 
}); 

をしかし、これは最初の行のデータ入力に基づいて、各ラインの同じ結果を返します。私は明らかに、ユーザーが各行に異なる値を入力し、行ごとに異なる結果を得ることを望みます。本当に誰かが役立つことを願って

$(document).ready(function() { 


$(".lineitem").each(function() { 

    function compute() { 

     var a = $(this).children('.a').val(); 
     var b = $(this).children('.b').val(); 
     var total = (a*b); 

     $(this).children('.total').text(total); 

    } 

     $('.b, .a').change(compute); 

     })}); */ 

Here's a JSFiddle with everything.

次のように私は、「各」と「$（この）.children」を使用してみましたが、それはうまくいきませんでした！私は検索の公平なビットが、ここで基本的な質問には何の喜びをやった...謝罪し、それはここでは繰り返し

Answer 1

これは役に立ちます。

$(document).ready(function() { 
 
    $('.a, .b').change(function() { 
 
    var tr = $(this).closest('tr'); 
 
    var a = parseInt(tr.find('.a').val()) || 0; 
 
    var b = parseInt(tr.find('.b').val()) || 0; 
 
    tr.find('.total').html(a + b); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Multiplication by line</h1> 
 
<table> 
 
    <tr> 
 
    <td>Number 1</td> 
 
    <td>Number 2</td> 
 
    <td>Result</td> 
 
    </tr> 
 
    <!-- LINE ITEM START --> 
 
    <div class="lineitem"> 
 
    <tr> 
 
     <td> 
 
     <input type="number" name="a" class="a" value="" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" name="b" class="b" value="" /> 
 
     </td> 
 
     <td> 
 
     <div class="total">0</div> 
 
     </td> 
 
    </tr> 
 
    </div> 
 
    <!-- LINE ITEM END --> 
 
    <div class="lineitem"> 
 
    <tr> 
 
     <td> 
 
     <input type="number" name="a" class="a" value="" /> 
 
     </td> 
 
     <td> 
 
     <input type="number" name="b" class="b" value="" /> 
 
     </td> 
 
     <td> 
 
     <div class="total">0</div> 
 
     </td> 
 
    </tr> 
 
    </div>

Answer 2

かどうworking Fiddle

は、あなたのコード内の誤りです、あなたがするクラスを使用していたました要素と一緒に遊んでいますが、必要な行だけで計算が制限されることはありませんでした。したがって、修正はwhen ever there is a change in the input elements, find the closest tr in which it is wrapped , and now find the items within this tr and do the calculations.

に変更され、計算が特定の行に制限されます。

function compute() {  
    var $parentTr = $(this).closest('tr'); // find the tr which wraps this element. 
    var a = $parentTr.find('.a').val();// find .a within this tr 
    var b = $parentTr.find('.b').val();// find .b within this tr 
    var total = (a * b); 

    $parentTr.find('.total').text(total);// change .total within this tr 
}