javascript - 将 AutoNumeric.js 应用于整个类

Question

如果有人能帮助我完成我认为简单的 AutoNumeric.js 应用程序，我会很高兴。我有以下代码:

fiddle 链接:https://jsfiddle.net/yu1s9nrv/8/

<table id="shareInput" class="table_standard">
  <tr>
    <th>Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Growth</th>
    <th>Yield</th>

  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>


  </tr>
  <tr>
    <td><input type="text" class="input_field_large" id="shareName" value=""></td>
    <td><input type="text" class="input_field_medium_num" id="shareQty" value=""></td>
    <td><input type="text" class="input_field_medium_dollar" id="sharePrice" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareGrowth" value=""></td>
    <td><input type="text" class="input_field_medium_pct" id="shareYield" value=""></td>

  </tr>
</table>

<script>
  window.onload = function() {


    const anElement = new AutoNumeric('.input_field_medium_pct', 0, {
      suffixText: "%"
    });

  };

</script>

我期望的输出是所有具有 input_field_medium_pct 类的字段都具有所需的 AutoNumeric 格式，但它仅格式化具有该类的第一个字段。文档内容如下:

// The AutoNumeric constructor class can also accept a string as a css selector. Under the hood this use QuerySelector and limit itself to only the first element it finds. anElement = new AutoNumeric('.myCssClass > input'); anElement = new AutoNumeric('.myCssClass > input', { options });

取自:https://github.com/autoNumeric/autoNumeric#initialize-one-autonumeric-object

我是 JS 新手，发现 AutoNumeric 文档注释有点令人困惑，有没有人遇到过这个问题或者能够解释为什么会出现这种情况？提前致谢。

Answer 1

您需要使用Autonumeric.multiple将其一次性应用于多个元素。

 const anElement =  AutoNumeric.multiple('.input_field_medium_pct', 0, {
      suffixText: "%"
 });

检查working jsfiddle

另外，请查看文档 https://github.com/autoNumeric/autoNumeric#initialize-multiple-autonumeric-objects-at-once