1

如何在这些表单中使用 jQuery 获得两个单独的结果？我在第一个表格中输入信息，答案显示在第二个表格中。

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 第一种形式的结果与第二种形式分开呢？

4

3 回答 3

0

您应该提供您的输入 ID，以便您可以专门引用每个 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 回答
0

从根本上讲，您应该了解 jquery 选择器选择和操作与您指定的条件匹配的尽可能多的元素。两种形式都具有相同的标识符，因此 Jquery 调用它们上的函数。正如其他人所提到的，您需要区分这两种形式，以便 Jquery 只对您想要的一种形式进行操作。

于 2013-06-09T02:34:41.267 回答