jQuery 更改时隐藏下一个元素

Question

我试图用 class 隐藏下一个元素，但我认为它被 html 结构弄糊涂了。

html:

<tr>
 <td>
  <input type="number" value="1" name="product_quantity" class="form-quantity" />
 </td>
 <td><a class="add_to_cart_button" href="#">Add To Cart</a></td>
</tr>

js:

$("tr").each(function() {
 $(this).find(".form-quantity").change(function() {
  $(this).closest(".add_to_cart_button").hide();
 });
});

JS Fiddle 看我的意思 - https://jsfiddle.net/vpvw6t53/

我试过使用 .parent、.children 和 .sibling 所以在这里问 :)

Answer 1

我现在不能尝试，但是

$("tr").each(function() {
  $(this).find(".form-quantity").change(function() {
    $(this).closest("tr").find(".add_to_cart_button").hide();
 });
});

应该可以。请记住，您 select 您的输入元素。

Answer 2

感谢@barmar 指出我的解决方案在实际 table 的上下文中不起作用。所以我更新了我的答案。

$(document).ready(function() {
  $(".form-quantity").change(function() {
    $(this).parent().next().find(".add_to_cart_button").hide();
  });
});

此外，您不需要遍历 tr 元素，因此我将其从代码中删除。

$(document).ready(function() {
  $(".form-quantity").change(function() {
    $(this).parent().next().find(".add_to_cart_button").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td>
      <input type="number" value="1" name="product_quantity" class="form-quantity" />
    </td>
    <td><a class="add_to_cart_button" href="#">Add To Cart</a></td>
  </tr>
  <tr>
    <td>
      <input type="number" value="1" name="product_quantity" class="form-quantity" />
    </td>
    <td><a class="add_to_cart_button" href="#">Add To Cart</a></td>
  </tr>
</table>

jQuery 更改时隐藏下一个元素

jQuery hide next element on change

each

jquery