[英]Jquery a .click then .slideDown div
I have anchor which when you click would slidedown a form within a div, and then click again would slide it back up. 我有锚点,当您单击该锚点时会将div中的表单向下滑动,然后再次单击将其向上滑动。 Initially I just used .toggle, but now I have multiple anchors and multiple divs with the same class, so I had to rework the code or else anytime you clicked on any of the anchors all the divs would slidedown and you would see 4 forms.
最初我只是使用.toggle,但是现在我有多个锚和同一个类的多个div,因此我不得不重新编写代码,否则无论何时单击任何锚,所有div都会滑落,您会看到4种形式。
So, I thought I could just rewrite the code with .closest, but it doesn't seem to be working. 所以,我以为我可以用.closest重写代码,但是似乎没有用。 I think it's because .closest has to go up the DOM hierarchy, so it won't work for my div the way it's laid out.
我认为这是因为.closest必须上升到DOM层次结构,所以它不适用于我的div,其布局方式也是如此。 I tried .sibling but that doesn't work either.
我尝试了.sibling,但这也不起作用。 Any ideas?
有任何想法吗?
<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>
I think you should wrap your a.payment-form-show and div.payment-form-wrapper inside a div. 我认为您应该将a.payment-form-show和div.payment-form-wrapper封装在div中。 Like this:
像这样:
<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>
When the a tag is clicked, you look for the immediate parent and then find the form: 单击一个标签后,您将寻找直接父级,然后找到以下形式:
$(this).parent().find("div.payment-form-wrapper"); $(本).parent()找到( “div.payment外形包装”);
In this case, the div wrapper serves as the context for your tags. 在这种情况下,div包装器充当标签的上下文。 This would create a more maintainable code.
这将创建一个更易于维护的代码。 Because when you use .next() or some function to look for the .div.payment-form-wrapper, your javascript code is coupled to the current position of the tags.
因为当您使用.next()或某些函数来查找.div.payment-form-wrapper时,您的javascript代码才会耦合到标记的当前位置。 In the future, if you modify the position, or add some tags in between, your code would fail.
将来,如果您修改位置或在两者之间添加一些标签,则代码将失败。
This code should work even if all the div's have the same class. 即使所有div都具有相同的类,此代码也应该起作用。 Check it out:
看看这个:
$(".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");
});
Fiddle based off of MG_Bautista's fiddle: http://jsfiddle.net/8b5q5/1/ 小提琴基于MG_Bautista的小提琴: http : //jsfiddle.net/8b5q5/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.