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>

  • 单击 a 标签时，您会查找直接父级，然后找到表单：

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

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

于 2013-04-06T02:11:08.480 回答
0

用这个...

$(".payment-form-show").on('click', function() {
    $('.payment-form-wrapper').slideToggle('slow');
    if($('.payment-form-wrapper').is('visible')){
        $(this).html("Pre-Pay with Credit Card");
    }else{
        $(this).html("Don't Pre-Pay with Credit Card");
    }
});

看DEMO

于 2013-04-06T01:06:19.177 回答
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 回答