Question

我有一个相当大的形式：

<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：添加了截图 Goal

Answer 1

您可以将$.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

如何在这个表单中使用jQuery .each（）？

1 个答案:

的更新