应用相同的计算，以不同的输入使用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 
}