Question

我正在为学校项目学习JQuery，需要帮助尝试遍历元素。

我有一张表格显示到期余额和输入框，供用户自行支付余额。当用户输入金额时，我不希望金额超过到期金额。以下是我到目前为止的情况：

HTML：

rem // Enumerate the directories:
for /D %%a in ("%mypath%\*") do (
    rem // Get file `*_B4.tif`:
    for %%b in ("%%~a\*_B4.tif") do (
        rem // Store currently iterated directory and name of file `*_B4.tif`:
        set "FDIR=%%~a"
        set "NAME=%%~nxb"
        rem /* Extract file name part `*` in front of the last occurring `_` by splitting
        rem    the name at every `_`, iterating through the parts, reassigning each one
        rem    to a variable, delayed by one iteration, appending to the previous value;
        rem    toggle delayed expansion to not lose exclamation marks in file names: */
        set "COLL=" & set "ITEM="
        setlocal EnableDelayedExpansion
        for %%c in ("!NAME:_=" "!") do (
            for /F "delims= eol=|" %%d in ("!COLL!!ITEM!_") do (
                endlocal
                set "COLL=%%d"
            )
            set "ITEM=%%~c"
            setlocal EnableDelayedExpansion
        )
        rem // Copy the `*` part from file `*_B4.tif` to all the other files:
        set "NAME=!FDIR!\!COLL:~1,-1!"
        script.exe "!NAME!_B4.tif" "!NAME!_B3.tif" "!NAME!_B2.tif" "!NAME!_output.tif"
        endlocal
    )
)

JQuery的：

<table>
    <tr class="arow">
        <td class="balance">
            20.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="balance">
            30.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="t-currentbalance">
            40.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
</table>

当我超过金额时，我会一直未定义。我把它改成了父母，我得到了一堆随机数据。任何帮助将不胜感激，非常感谢！〜

Answer 1

第一：不需要.each()

第二次：您需要使用parseInt()

第三次：您还需要添加input keyup个事件

参见演示

＆＃13;

$('.forminput').on("paste input keyup", function() {
  var otherAmount = parseInt($(this).val());
  var currentBalance = parseInt($(this).parent('td').prev('td.balance').text());
  if (otherAmount > currentBalance) {
    alert('You are over the balance amount!');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="arow">
        <td class="balance">
            20.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="balance">
            30.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="t-currentbalance">
            40.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
</table>

＆＃13;

Answer 2

这是<td>的事实与问题或答案无关您的.arow包含.balance和.otheramount 当.otheramount发生变化时，您希望获得同一.balance内.arow的{{1}} 从当前的其他对象中找到最接近的.arow：$(this).closest('.arow')
从那里你可以找到其中的.balance：$(this).closest('.arow').find('.balance')
其中的文本具有当前余额：
var currentBalance = $(this).closest('.arow').find('.balance').text();

您希望将此问题视为一个值，因此您可以parseFloat(currentBalance)

您可能还希望在键入内容时检查该值，而不仅仅是在发生更改事件时，请将keyup事件添加到侦听器，但是您应该删除change。< / p>

小心使用parseFloat，您可能希望首先获取.text（）值并对其进行模式匹配，以确保parseFloat不会为您提供NaN。

// Note this does not check for non-numeric input, so parseFloat could botch things.
$(".forminput").on("click paste keyup", function() {
    var otherAmount = parseFloat($(this).val());
    var currentBalance = parseFloat($(this).closest('.arow').find('.balance').text());
    if (otherAmount > currentBalance) {
      alert('You are over the balance amount!');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
    <tr class="arow">
        <td class="balance">
            20.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="balance">
            30.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="balance">
            40.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
</table>

在这里，我们看到即使它不在表格中，同样的事情仍然有效...这使用了div和span。我提到这一点是因为使用表格来布置你的内容被认为是不好的形式您在此处看到完全相同的代码无更改，也适用于此标记。它仅取决于类，而不取决于使用哪些HTML标记。

// Note this does not check for non-numeric input, so parseFloat could botch things.
$(".forminput").on("click paste keyup", function() {
    var otherAmount = parseFloat($(this).val());
    var currentBalance = parseFloat($(this).closest('.arow').find('.balance').text());
    if (otherAmount > currentBalance) {
      alert('You are over the balance amount!');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <div class="arow">
        <span class="balance">
            20.00
        </span>
        <span class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </span>
    </div>
    <div class="arow">
        <span class="balance">
            30.00
        </span>
        <span class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </span>
    </div>
    <div class="arow">
        <span class="balance">
            40.00
        </span>
        <span class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </span>
    </div>
</div>

确保TD输入值不超过以前的TD值

2 个答案: