我有一个相当大的形式:
<table id="form_table">
<tr class="table_headers">
<th>Sources (sorted alphabetically)</th>
<th>Max $$ Allowed</th>
<th>You Suggest...</th>
<th>Warning</th>
<th>Who Pays This?</th>
<th>How Much do They Pay?</th>
<th>How do They Pay?</th>
<th>Meaning...</th>
</tr>
<tr>
<td class="label"><p>Borrowed Money (Debt from Bonds)</p></td>
<td class="max_amount" id="b1"><p>36</p></td>
<td class="usr_amount"><input type="text" name="c1" class="usrAmts" /></td>
<td class="warning"><p id="d1"></p></td>
<td class="paid_by"><p>Property Owners (Property Tax)</p></td>
<td class="paid_amount"><p id="f1" class="paidAmts"></p></td>
<td class="paid_how"><p>property tax rate per year</p></td>
<td class="meaning"><p><span id="h1"></span> per year on a $210,000 house</p></td>
</tr>
<tr>
<td class="label"><p>Business Licenses</p></td>
<td class="max_amount" id="b2"><p>25</p></td>
<td class="usr_amount"><input type="text" name="c2" class="usrAmts" /></td>
<td class="warning"><p id="d2"></p></td>
<td class="paid_by"><p>Business Owners' Customers</p></td>
<td class="paid_amount"><p id="f2" class="paidAmts"></p></td>
<td class="paid_how"><p>per employee per year</p></td>
<td class="meaning"><p></p></td>
</tr>
</table>
我想要做的是使用jQuery .each()
,以便我可以提醒用户他的输入是否高于<td class="max_amount">
中的值,而不必写一堆if语句。 / p>
我猜伪代码的一个好例子是
for (i = 0; i <= 10; i++)
if ($('#usr_input[i]').val() > $('#max_val[i]').val())
$('span#[i]').text('too high!');
或类似的东西。我真的不知道如何把它说成文字。如果写得不好,我会道歉,如果被问到可以提供更多细节。
我可以用.each()执行此操作,还是必须写出所有if语句?
编辑1:我修改了我的HTML(上面),然后尝试了这个:
$('[id^=usr_input]').each(function(i) {
$(this).on('change', function() {
if ($(this).val() > $('#b'+ i).val()) {
$('p#d'+ i).text('too high!');
}
});
});
没有运气。
编辑2:改为:
$('[id^=c]').each(function(i) {
$(this).on('change', function() {
if ($(this).val() > $('#b'+ i).val()) {
$('p#d'+ i).text('too high!');
}
});
});
我将[id^=c]
用于input
id
编辑3:添加了截图
答案 0 :(得分:3)
您可以将$.each
与选择器
$('[id^=usr_input]').each(function(i) {
if ($(this).val() > $('#max_val'+ i +']').val())
$('span#f['+ i +' ]').text('too high!');
});
您需要附加i
如果您的inputs
ID为'max_val1','max_val2'等等,那么
您首先不需要使用ID's
。您可以使用closest
迭代相关元素并获取功能。
// This is where users enter the Amount
// To access value from input you use .val()
// To access value from elements that are not input
// you use .text();
$('.usrAmts').on('change', function () {
// The input that triggered the change
var $this = $(this),
// Closest row for input
// Need this as you want to find the other elements inside
// the particular row.
$row = $(this).closest('tr'),
// Find the p tag inside the max amount
// need to use text as it is not input
$max = $row.find('.max_amount p'),
// warning class that holds error
$err = $row.find('.warning p');
if ($(this).val() > parseFloat( $max.text())) {
$err.text('too high!');
} else {
$err.text('');
}
});
<强> Check Fiddle 强>