1

私はこの問題に固執しました。体のBMIを計算したい。

私の HTML - すべての行<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));
});

誰か道を教えてくれませんか？ありがとう

4

5 に答える 5

2

重複する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);
});

入力値にfloatを許可する場合は、次を含む2行をparseInt次のように置き換えます。

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

デモ： http： //jsfiddle.net/KStjd/

于 2012-05-27T16:59:09.903 に答える
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/

于 2012-05-27T16:59:11.790 に答える
1

一意の 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);
});
于 2012-05-27T16:58:44.400 に答える
0 
$("input[name=weight], input[name=height").keyup(function() {
    var row = $(this).parent().parent(),
        weight = parseFloat($('input[name=weight]', row).val()),
        height = parseFloat($('input[name=height]', row).val());
    var bmi = weight / (height / 100 * height / 100);
    $('.bmi', row).val(isNaN(bmi) ? '' : bmi);
});

作業サンプル

于 2012-05-27T17:10:26.820 に答える
-1 
$(document).ready(function()
{
    $("PutYourButtonID_Here").click(function(event){
        var weight= parseFloat($("#person1_weight").val());
        var height= parseFloat($("#person1_height").val());
        var bmi = weight/(height/100*height/100);
        $("#person1_bmi").val(bmi);
    });
});
于 2012-05-27T17:12:21.533 に答える