我试图隐藏/显示每个产品的变体表单。基本上,如果用户单击quick shop按钮,就会打开与该产品相关的变体表单。如果他们再次选择它,它将为该产品隐藏它。
问题是我不知道如何隐藏或显示“快速购物”按钮所属的产品。html源于woocommerce,因此我无法进入html并提供单独的ID来区分。
以下是目前发生的一些屏幕截图:
这里有三种产品,每种都有自己的快速购物按钮(忽略图标上的静音扬声器并表示歉意)
我选择中间产品的“快速购物”按钮,但正如您所看到的,它会打开第一个产品的变体表单:
然后,当我再次单击中间的“快速购物”按钮以隐藏变体表单时,它会打开所有变体表单:
那是我的问题。请帮忙:)
jquery:
$(document).ready(function() {
jQuery( '.quick_shop' ).click(function() {
jQuery('.variations_form').toggle('slide', { direction: 'down' }, 300);
});
});
html:
<div class="quick_shop_container">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop </span>
<span class="quick_shop_price">
| From £24.99 </span>
</button>
</div>
<form class=“variations_form”>
//REST OF FORM UNDERNEATH
css:
.variations_form{
display:none;
}
html代码结构(尽我所能操作代码以删除不需要的代码):
`<ul class="products columns-3">
<li class="pif-has-gallery column-1_3 product type-product">
<div class="post_item_wrap">
<div class="post_featured">
<div class="post_thumb">
<a class="hover_icon hover_icon_link" href="">
<div class="container-image-and-badge ">
<img>
<div class="yith-wcbm-badge__wrap">
<img>
</div>
<!--yith-wcbm-badge__wrap-->
</div>
<!--yith-wcbm-badge-->
</div>
<!--container-image-and-badge-->
<img>
</a>
</div>
</div>
<div class="post_content">
<a class="" href="xxx?product=espresso-coffee-taster-pack">
</a>
<div class="quick_shop_container">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop </span>
<span class="quick_shop_price">
| From £24.99 </span>
</button>
</div>
<form class="variations_form">
...
</form>
</div>
</div>
</li>
<li class="pif-has-gallery column-1_3 product type-product">
<div class="post_item_wrap">
<div class="post_featured">
<div class="post_thumb">
<a class="hover_icon hover_icon_link" href="xxx?product=speciality-coffee-taster-pack">
<div class="container-image-and-badge ">
<img>
<div class="yith-wcbm-badge__wrap">
<img>
</div>
<!--yith-wcbm-badge__wrap-->
</div>
<!--yith-wcbm-badge-->
</div>
<!--container-image-and-badge--><img>
</a>
</div>
</div>
<div class="post_content">
<a class="" href="xxx?product=speciality-coffee-taster-pack">
</a>
<div class="quick_shop_container">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop </span>
<span class="quick_shop_price">
| From £31.99 </span>
</button>
</div>
<form class="variations_form">
...
</form>
</div>
</div>
</li>
<li class="pif-has-gallery column-1_3 product type-product">
<div class="post_item_wrap">
<div class="post_featured">
<div class="post_thumb">
<a class="hover_icon hover_icon_link" href="xxx?product=12-month-coffee-subscription">
<img> </a>
</div>
</div>
<div class="post_content">
<a class="" href="xxx?product=12-month-coffee-subscription">
</a>
<div class="quick_shop_container">
<button class="quick_shop">
<span class="quick_shop_text">Quick Shop </span>
<span class="quick_shop_price">
| £125.99 </span>
</button>
</div>
<form class="variations_form">
...
</form>
</div>
</div>
</li>
</ul>`
1条答案
按热度按时间kse8i1jr1#
jquery选择器选择所有
.variation_form
可以选择最近的图元.quick_shop_container
,下一个呢.variations_form
要素: