1

これらのフォームで jQuery を使用して 2 つの別々の結果を取得するにはどうすればよいですか? 最初のフォームに情報を入力すると、2 番目のフォームに答えが表示されます。

HTML:

<div class="span12">
  <div class="span4">
    <div class="row-fluid exercise1 one_rep_calc_container">
      <form>
        <div class="span4">Weight<input class="weight" type="number" name="weight" size="2" ></div>
        <div class="span4">Reps<input class="reps" type="number" name="reps" size="2" ></div>
        <div class="span4">OneRepMax<input class="one_rep_max" type="number" Name="oneRepMax" size="2" ></div>
      </form>
    </div>
  </div>
  <div class="span4">
    <div class="row-fluid exercise1 one_rep_calc_container">
      <form>
        <div class="span4">Weight<input class="weight" type="number" name="weight" size="2" ></div>
        <div class="span4">Reps<input class="reps" type="number" name="reps" size="2" ></div>
        <div class="span4">OneRepMax<input class="one_rep_max" type="number" Name="oneRepMax" size="2" ></div>
      </form>
    </div>
  </div>
</div>

クラスoneRepMaxは、なぜ体重と回数の結果のソリューション形式です。

jQuery:

$('.one_rep_calc_container .weight, .one_rep_calc_container .reps').change(function(){
  var weight = parseInt($('.one_rep_calc_container .weight').val(), 10 );
  var reps   = parseInt($('.one_rep_calc_container .reps').val(), 10);
  if(weight > 0 && reps > 0){
    var oneRepMaxVal = ((reps*weight)/30) + weight;
    $('.one_rep_calc_container .one_rep_max').val(oneRepMaxVal);
  } else {
    $('.one_rep_calc_container .one_rep_max').val('');
  }
});

$('.one_rep_calc_container .calc_one_rep_button').click(function(){
    var weight = parseInt($('.one_rep_calc_container .weight').val(), 10 );
    var reps   = parseInt($('.one_rep_calc_container .reps').val(), 10);
    var oneRepMaxVal = ((reps*weight)/30) + weight;
    $('.one_rep_calc_container .one_rep_max').val(oneRepMaxVal);
});

では、oneRepMax の最初の形式の結果を 2 番目の形式から分離するにはどうすればよいでしょうか?

4

3 に答える 3

0

それぞれを具体的に参照できるように、入力 ID を指定する必要があります。

<input id="weight1" class="weight" type="number" name="weight" size="2" >

次に、使用できます

$('#weight1').val()

特定のものを参照します。

于 2013-06-09T02:26:58.367 に答える
0

これを試して：

$('.one_rep_calc_container .weight, .one_rep_calc_container .reps').change(function(){
    var parent = $(this).parents('.one_rep_calc_container');   

    var weight = parseInt(parent.find('.weight').val(), 10 );
    var reps   = parseInt(parent.find('.reps').val(), 10);

    if(weight > 0 && reps > 0){
    var oneRepMaxVal = ((reps*weight)/30) + weight;
    parent.find('.one_rep_max').val(oneRepMaxVal);
  }
  else {
    parent.find('.one_rep_max').val('');
  }

});

$('.one_rep_calc_container .calc_one_rep_button').click(function(){
    var parent = $(this).parents('.one_rep_calc_container');
    var weight = parseInt(parent.find('.weight').val(), 10 );
    var reps   = parseInt(parent.find('.reps').val(), 10);

    var oneRepMaxVal = ((reps*weight)/30) + weight;
    parent.find('.one_rep_max').val(oneRepMaxVal);
});

アイデアは、現在の要素の親を取得することです。その親は、その後のすべての操作のコンテキストです。そのようにして、現在の親の子である要素のみを操作します。

于 2013-06-09T02:34:08.907 に答える