我有一个函数来计算3个输入框之一何时有变化,然后显示该答案。发生更改时,我可以触发该函数,但无法从每个输入中获取值。以下是html和js片段。
HTML:
<div>
<table>
<tr>
<th></th>
<th>Base</th>
<th class="gen-specific g3 g4 g5 g6">IVs</th>
<th class="gen-specific g3 g4 g5 g6">EVs</th>
<th></th>
<th></th>
</tr>
<tr class="hp" onchange="hp_calculator()">
<td>
<label>HP</label>
</td>
<td>
<input class="base" value="100" />
</td>
<td class="gen-specific g3 g4 g5 g6">
<input class="ivs calc-trigger" value="31" />
</td>
<td class="gen-specific g3 g4 g5 g6">
<input class="evs calc-trigger" type="number" min="0" max="252" step="4" value="0" />
</td>
<td><span class="total">341</span>
</td>
<td></td>
</tr>
</table>
</div>
JS:
function hp_calculator() {
var hp = $(this).find(".base").val()*$(this).find(".iv calc-trigger").val()+$(this).find(".ev calc-trigger").val();
$(this).find(".total").val(hp);
}
最佳答案
首先,this
将成为窗口,而不是元素。而是将元素传递到处理程序中,然后使用参数。
<tr class="hp" onchange="hp_calculator(this)">
然后,您需要为多个类选择器更改类选择器
.class1.class2
,然后再.text()
更改span
元素的文本。最后要注意的是,您在"s"
和ivs
中都不使用evs
了:function hp_calculator(ele) {
var hp = $(ele).find(".base").val()*$(ele).find(".ivs.calc-trigger").val()+$(ele).find(".evs.calc-trigger").val();
$(ele).find(".total").text(hp);
}
Demo
注意
内联事件处理程序通常是一种不好的做法。相反,我建议您直接将它们附加在JavaScript中,这样
this
将按预期工作。这是一个如何在jQuery(demo)中执行此操作的示例:$('.hp').change(function(){
var hp = $(this).find(".base").val()*$(this).find(".ivs.calc-trigger").val()+$(this).find(".evs.calc-trigger").val();
$(this).find(".total").text(hp);
});