html - 过滤表格后，数字输入正在丢失属性

Question

我有下表，顶部有一个过滤器部分。我也有一些 jQuery 来修改每个表格行中的输入字段。

如果我select第一次更改过滤器中的选项，一切正常，但是当我select第二次更改选项时，数字输入字段的行为不正确。我该如何解决这个问题？

jQuery(document).ready(function() {
  // product variation table inputs
  jQuery('.variations-table tr').each(function(_, item) {
    let stepValue = parseInt(jQuery("td[data-title='Verpackung']", item).text());
    jQuery('.quantity input', item).attr('step', stepValue);
    jQuery('.quantity input', item).attr('min', stepValue);
    jQuery(".variations-table .quantity input").val('0');
  });

  jQuery('.variations-table tr').each(function(_, item) {
    let stepValue = parseInt(jQuery("td[data-title='Verpackung']", item).text());
    jQuery(".filter select").change(function() {
      jQuery(".variations-table .quantity input").each(function() {
        jQuery(_, item).attr('val', '0');
      });
      jQuery('.quantity input', item).attr('step', stepValue);
      jQuery('.quantity input', item).attr('min', stepValue);
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="variation-filters">
  <div class="filters form-inline">
    <div class="filter">
      <label>DN</label>
      <select class="form-control">
        <option value="">alle</option>
        <option value="attribute_pa_dn:40">40</option>
        <option value="attribute_pa_dn:50">50</option>
        <option value="attribute_pa_dn:65">65</option>
        <option value="attribute_pa_dn:80">80</option>
        <option value="attribute_pa_dn:15">15</option>
        <option value="attribute_pa_dn:10">10</option>
        <option value="attribute_pa_dn:20">20</option>
        <option value="attribute_pa_dn:25">25</option>
        <option value="attribute_pa_dn:32">32</option>
      </select>
    </div>
  </div>
</div>
<table class="variations">
  <thead>
    <tr>
      <th class="pa_thread">Gewinde</th>
      <th class="pa_dn">DN</th>
      <th class="pa_filter">Filter</th>
      <th class="pa_package">Verpackung</th>
      <th class="sku">Bestell-Nr.</th>
      <th class="quantity">Menge</th>
      <th class="add-to-cart"></th>
    </tr>
  </thead>
  <tbody>
    <tr class="variation-19537 image-Rohrnippel-Nr22-Stahl">
      <td data-title="Gewinde">3/8"</td>
      <td data-title="DN">10</td>
      <td data-title="Filter">schwarz</td>
      <td data-title="Verpackung">10</td>
      <td data-title="Bestell-Nr."><span class="item">095-05</span></td>
      <td class="quantity">
        <form action="#">
          <input type="number" step="10" min="10" max="" name="quantity" data-title="Qty" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
        </form>
      </td>
      <td class="add-to-cart"><button type="submit" class="single_add_to_cart_button button alt" disabled="disabled">Anfrage</button></td>
    </tr>
    <tr class="variation-19536 image-Rohrnippel-Nr22-Stahl">
      <td data-title="Gewinde">3/8"</td>
      <td data-title="DN">10</td>
      <td data-title="Filter">verzinkt</td>
      <td data-title="Verpackung">10</td>
      <td data-title="Bestell-Nr."><span class="item">095-05v</span></td>
      <td class="quantity">
        <form action="#">
          <input type="number" step="10" min="10" max="" name="quantity" data-title="Qty" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
        </form>
      </td>
      <td class="add-to-cart"><button type="submit" class="single_add_to_cart_button button alt" disabled="disabled">Anfrage</button></td>
    </tr>
    <tr class="variation-19542 image-Rohrnippel-Nr22-Stahl">
      <td data-title="Gewinde">1 1/4"</td>
      <td data-title="DN">32</td>
      <td data-title="Filter">schwarz</td>
      <td data-title="Verpackung">1</td>
      <td data-title="Bestell-Nr."><span class="item">095-13</span></td>
      <td class="quantity">
        <form action="#">
          <input type="number" step="1" min="1" max="" name="quantity" data-title="Qty" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
        </form>
      </td>
      <td class="add-to-cart"><button type="submit" class="single_add_to_cart_button button alt" disabled="disabled">Anfrage</button></td>
    </tr>
    <tr class="variation-19543 image-Rohrnippel-Nr22-Stahl">
      <td data-title="Gewinde">1 1/4"</td>
      <td data-title="DN">32</td>
      <td data-title="Filter">verzinkt</td>
      <td data-title="Verpackung">1</td>
      <td data-title="Bestell-Nr."><span class="item">095-13v</span></td>
      <td class="quantity">
        <form action="#">
          <input type="number" step="1" min="1" max="" name="quantity" data-title="Qty" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric">
        </form>
      </td>
      <td class="add-to-cart"><button type="submit" class="single_add_to_cart_button button alt" disabled="disabled">Anfrage</button></td>
    </tr>
  </tbody>
</table>

这是一个链接，有一个活的例子： https ://dev.krause-hattingen.de/produkte/gewinde-und-schweissfits/stahlfits/rohrnippel-nr-22-aus-stahl/

非常感谢你帮助我！

标签： htmljquerywoocommerce