2

クリックするとdiv内のフォームがスライドダウンし、もう一度クリックするとスライドアップするアンカーがあります。最初は .toggle を使用していましたが、現在は複数のアンカーと同じクラスの複数の div があるため、コードを作り直すか、いずれかのアンカーをクリックするとすべての 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>
4

3 に答える 3

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>

  • タグがクリックされると、直接の親を探して、次のフォームを見つけます。

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

  • この場合、div ラッパーはタグのコンテキストとして機能します。これにより、より保守しやすいコードが作成されます。.next() または関数を使用して .div.payment-form-wrapper を探すと、JavaScript コードがタグの現在の位置に結合されるためです。将来、位置を変更したり、間にいくつかのタグを追加したりすると、コードが失敗します。

于 2013-04-06T02:11:08.480 に答える
0

このコードは、すべての div が同じクラスであっても機能するはずです。見てみな：

$(".payment-form-show").on('click', function() {
    var slider = $(this).closest("a").next();

    slider.slideToggle("slow");    
    slider.is(":visible") ? $(this).html("Pre-Pay with Credit Card") : $(this).html("Don't Pre-Pay with Credit Card");
});

MG_Bautista のフィドルに基づくフィドル: http://jsfiddle.net/8b5q5/1/

于 2013-04-06T03:54:43.470 に答える