jquery切换不隐藏/显示特定元素

yvt65v4c  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(322)

我试图隐藏/显示每个产品的变体表单。基本上,如果用户单击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 &nbsp;</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 &nbsp;</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 &nbsp;</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 &nbsp;</span>
               <span class="quick_shop_price"> 
               | £125.99      </span>
               </button> 
            </div>
            <form class="variations_form">
            ...
            </form>
         </div>
      </div>
   </li>

</ul>`
kse8i1jr

kse8i1jr1#

jquery选择器选择所有 .variation_form 可以选择最近的图元 .quick_shop_container ,下一个呢 .variations_form 要素:

jQuery(this).closest('.quick_shop_container').next('.variations_form').toggle('slide', { direction: 'down' }, 300);

相关问题