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

Question

我正在尝试隐藏/显示每种产品的变体形式。基本上，如果用户点击快速商店按钮，与该产品相关的变体表单将打开。如果他们再次选择它，它将为该产品隐藏它。

问题是我不知道如何专门为快速商店按钮所属的产品隐藏或显示它。 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>`

Answer 1

您的 jQuery 选择器选择所有 .variation_form 元素 可以选择最接近的.quick_shop_container，以及下一个.variations_form元素：

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