應用相同的計算，以不同的輸入使用JQuery

Question

我想寫一些簡單的HTML/jQuery將應用相同的計算到不同的領域。

我簡單的問題到下面的HTML：

<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：

$(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.

真的希望有人能幫助！我已經做了搜索對基本問題公平一點，但沒有喜悅在這裏...道歉，如果這是一個重複

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>

每個`tr`的

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 
}