javascript - Jquery a .click 然后 .slideDown div

Question

我有一个 anchor ，当您单击它时，它会在 div 中向下滑动一个表单，然后再次单击会将其向上滑动。最初我只是使用 .toggle，但现在我有多个 anchor 和多个具有相同类的 div，所以我不得不重新编写代码，否则只要你点击任何一个 anchor ，所有的 div 都会滑下来，你会看到 4 个表单。

所以，我想我可以用 .closest 重写代码，但它似乎不起作用。我认为这是因为 .closest 必须上升到 DOM 层次结构，所以它不适用于我的 div 它的布局方式。我试过 .sibling 但这也不起作用。有什么想法吗？

  <a href="#" class="payment-form-show">Pre-Pay with Credit Card</a>
  <div style="display: none;" class="payment-form-wrapper">
      <h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
      <form action="" method="POST" id="stripe-payment-form" class="payment-form">
        ...
      </form>
  </div>

  <script>
        $("a.payment-form-show").click(function() {
            var e = $(this).closest("div.payment-form-wrapper");
                    if (e.is(":hidden")) {
                        e.slideDown("slow");
                        $(this).html("Don't Pre-Pay with Credit Card")
                    } else {
                        e.slideUp("slow");
                        $(this).html("Pre-Pay with Credit Card")
                    }
            return false;
        });
    </script>

Answer 1

我认为您应该将 a.payment-form-show 和 div.payment-form-wrapper 包装在一个 div 中。像这样:

<div>
<a href="#" class="payment-form-show">Pre-Pay with Credit Card</a>
  <div style="display: none;" class="payment-form-wrapper">
      <h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
      <form action="" method="POST" id="stripe-payment-form" class="payment-form">
        ...
      </form>
  </div>
</div>

• 当点击 a 标签时，您查找直接父级，然后找到表单:

  $(this).parent().find("div.payment-form-wrapper");

• 在这种情况下，div 包装器用作您的标记的上下文。这将创建更易于维护的代码。因为当您使用 .next() 或某些函数来查找 .div.payment-form-wrapper 时，您的 javascript 代码会耦合到标签的当前位置。以后如果修改位置，或者在中间添加一些标签，你的代码就会失败。