如何在这些表单中使用 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 第一种形式的结果与第二种形式分开?
最佳答案
试试这个:
$('.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);
});
这个想法是获取当前元素的父元素。该父级是您之后所有操作的上下文,这样您就只能使用当前父级的子级元素。
关于javascript - 如何防止 jQuery 结果以两种不同的形式显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17005815/