jquery计算BMI

Question

我坚持这个问题。我想计算一下身体的BMI。

每一行<tr>都是由PHP动态创建的。

     <tbody>        
     <tr id="person_bmi">
        <td>Jack</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

    <tr id="person_bmi">
        <td>Michael</td>
        <td><input name="weight" type="text" class="span1" id="weight" maxlength="5"></td>
        <td><input name="height" type="text" class="span1" id="height" maxlength="5"></td>
        <td><input name="bmi" type="text" class="span1" id="bmi" readonly></td>       
      </tr>

      //and so on...
</tbody>

我试图实现的是每个人Jack，Michael，so on..在计算了他们自己的BMI值后，在#bmi文本字段中都会有他们自己的$weight/($height*100/$height*100)值。我试着创建我自己的代码，但它没有意义。

$("#weight, #height").keyup(function(){
    var $weight= $("#weight").val();
    var $height= $("#height").val();
    var $bmi = $weight/($height/100*$height/100);

    $("#bmi").val(parseInt($bmi));
});

有人能给我带路吗？谢谢

Answer 1

删除重复的ID，改用class="weight"、class="height"和class="bmi"。然后，您可以使用以下jQuery代码：

$(".weight, .height").keyup(function() {
    var row = $(this).closest('tr');
    var weight = parseInt(row.find('.weight').val(), 10);
    var height = parseInt(row.find('.height').val(), 10);
    var bmi = weight / (height / 100 * height / 100);
    row.find('.bmi').val(isNaN(bmi) ? '' : bmi);
});

如果要允许输入值使用浮点数，请将包含parseInt的两行替换为以下内容：

var weight = parseFloat(row.find('.weight').val());
var height = parseFloat(row.find('.height').val());

演示：http://jsfiddle.net/KStjd/

Answer 2

问题很可能是val返回字符串，而字符串不能被乘除。正如ThiefMaster所提到的，您也不能有多个具有相同id的项，因此请将<tr id="person_bmi">更改为<tr class="person_bmi">

$(".person_bmi input").keyup(function() {
   var $parent = $(this).parent().parent();

   var weight = parseFloat($parent.find("[name='weight']").val());
   var height = parseFloat($parent.find("[name='height']").val());
   var bmi = weight/(height/100*height/100);

   $parent.find("[name='bmi']").val(bmi);
});​

下面是一个完整的工作示例的小提琴：http://jsfiddle.net/uCAYF/1/

您看到的正在使用的.find函数是“限定了作用域的”，因为它将只查找从调用它的元素派生的节点。因为它被限定了作用域，所以它将安全地选择给定行上感兴趣的输入字段。

jQuery允许你在搜索元素时使用CSS选择器，所以你可以做更多的事情，而不仅仅是通过id来查找。例如，在上面的示例中，我根据输入元素的名称找到它们。

这里有一些关于你可以使用的不同选择器及其工作原理的很好的参考资料：http://www.w3.org/TR/CSS2/selector.html

http://www.w3.org/TR/selectors/

Answer 3

请尝试添加唯一id：

var weight= parseFloat($("#person1_weight").val());
var height= parseFloat($("#person1_height").val());
var bmi = weight/(height/100*height/100);

$("#person1_bmi").val(bmi); // bmi is not an integer

或者，无论无效的非唯一id如何，下面的方法都可能起作用，因此您可以保留它们(不推荐)或去掉所有的id。它使用输入位置。

$("tr input:eq(0), tr input:eq(1)").keyup(function(){
    var weight= parseFloat($(this).closest('tr').find('input:eq(0)'));
    var height= parseFloat($(this).closest('tr').find('input:eq(1)'));
    var bmi = weight/(height/100*$height/100);

    $(this).closest('tr').find('input:eq(2)').val(bmi);
});