javascript - jQuery AutoNumeric 不格式化多个字段

Question

我已经尝试了很多方法，但我正在用头撞墙。我似乎无法将 jQuery 自动数字插件应用于多个输入字段。

<script type="text/javascript">
  $(document).ready(function() { 
    $("#numeric").autoNumeric('init', {aSign: '$ '});
  }); 
</script>

然后我在几个输入字段中使用它......

<tr id="row">
  <td width="5%"><input id="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input id="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input id="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>

由于某种原因，格式仅适用于第一个字段。因此，当我在第一个输入字段中输入内容时，它会按照我的意愿进行格式化(例如 $ 12.50)。但接下来的字段就像什么都没有改变一样，只是文本字段。在阅读另一篇文章后，我还尝试使用数组代替输入名称:

name="price[]"

我还尝试了不同的名称，例如价格1、价格2、价格3，但这不起作用，而且由于动态创建附加项目，这也不是我希望的命名方式。

有什么帮助/建议/想法吗？提前致谢。

Answer 1

ID 是唯一的，并且您要为多个字段分配相同的 ID，因此在初始化时，它会选择使用给定 ID 找到的第一个元素。使用这样的类/标签选择器:

<tr id="row">
  <td width="5%"><input class="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input class="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>
<tr id="row">
  <td width="5%"><input class="numeric" type="text" name="price" data-a-sign="$ "></td>
</tr>

  $(document).ready(function() { 
      $(".numeric").autoNumeric('init', {aSign: '$ '});
  });

或使用标签选择器:

$(document).ready(function() { 
    $("input").autoNumeric('init', {aSign: '$ '});
});