Question

我试图用类隐藏下一个元素，但我认为它被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小提琴，看看我的意思 - 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();
 });
});

应该有效。请记住，您选择了Input元素。

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在更改时隐藏下一个元素

2 个答案: