使用jQuery事件跟踪多个变量时使用当前变量

时间:2016-12-22 08:18:10

标签: javascript jquery html forms jquery-events

在您的下方,我将找到一个简单的示例,说明我正在使用的代码以及我要完成的任务。
我用jQuery跟踪多个变量,需要在某个事件上调用一个函数。问题是我没有设法只使用刚改变的变量。

在HTML正文部分,我有几个输入字段,人们可以填写一个数字。该数字应使用逗号作为千位分隔符格式化。感谢Elias Zamaria,我找到了一个很好的解决方案(https://stackoverflow.com/a/2901298/7327579)。现在我希望用jQuery实现这一点,这样我就可以跟踪所有可以一次获得数字输入的变量。

<html>
  <title></title>
  <head>

在html的头部,我插入我的脚本来跟踪我的变量:

    <script language="javascript">
      var Currency = function() {  
        this.currencyType = $("#businessAuthorisation, #businessIncome, #entityIncome, #entityAuthorisation);  

格式化数字的函数,只应从当前正在更改的变量中获取当前数字:

          this.formatCurrency = function(x) {
              var parts = x.toString().split(".");
              parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              return parts.join(".");
          };
      };

跟踪开始并在 keyUp 事件中调用我的函数。只有当前变量应该是被调用函数的参数。

      $(document).ready(function() {
        var currency = new Currency();
        currency.currencyType.keyup(function() {
          currency.formatCurrency(this);
        });
      });
    </script>
  </head>

以下是我的表单中的相关输入字段:

  <body>
    <form>
      <table>
        <tr>
          <td><input type="number" name="entityAuthorisation" id="entityAuthorisation" value="<%=entityAuthorisation%>></td>
        </tr>       
        <tr>
          <td><input type="number" name="businessAuthorisation" id="businessAuthorisation" value="<%=businessAuthorisation%>"></td>
        </tr>
        <tr>
          <td><input type="number" name="entityIncome" id="entityIncome" value="<%=entityIncome%>"></td>
        </tr>       
        <tr>
          <td><input type="number" name="businessIncome" id="businessIncome" value="<%=businessIncome%>"></td>
        </tr>
      </table>
    </form>
  </body>
</html>

如何确保该函数仅适用于导致事件的当前元素?

1 个答案:

答案 0 :(得分:1)

在jQuery事件处理程序中,this指的是触发事件的元素。您需要使用.value来获取输入的值。所以你应该写:

  $(document).ready(function() {
    var currency = new Currency();
    currency.currencyType.keyup(function() {
      this.value = currency.formatCurrency(this.value);
    });
  });