クリックして要素を見つけ、最も近いモーダルウィンドウを開きます

Question

クリックすると、ボタンに関連した要素を見つけるのに問題があります。

いくつかのコンテキストでは、私は製品をループしています。各製品には独自のモーダルウィンドウがありますので、クラス名が.quick-cartのボタンをclcikingすると、モーダルウィンドウを製品に対して相対的に開くことができます。

これは、私はこれを試してみてくださいする必要がJSである：すべての製品やモーダルウィンドウの

$('.quick-cart').click(function(){ 
    var modal = $(this).parent('.product-item').siblings().find(".md-modal"); 
    $(modal).addClass('md-show'); 
    $('.md-overlay').addClass('show'); 
    $('html,body').addClass('no-scroll'); 
}); 

私のHTML /マークアップは次のとおりです。

<div class="product" > 
    <div class="product-item"> 
    <div class="product-item-container"> 
     <div class="product-item-show-scroll"> 
      <div class="product-item__content"> 
       <h3>Title</h3> 
       <div class="product-item__img"> 
        <img src="#"> 
       </div> 
      </div> 
     </div> 

     <div class="product-item-under-scroll"> 
      <div class="btn__group"> 
       <button class="quick-cart">Quick Cart</button> 
      </div> 
     </div> 
    </div> 

    <div class="product-item__bottom"> 
     <p class="price">Price</p> 
    </div> 
    </div> 

    <div class="md-modal"> 
    Modal content for product 
    </div> 

</div> 

Answer 1

あなたは本当に兄弟を必要としないと見つける。次は行います

var model = $(this).closest('.product-item').next(".md-modal");