单击查找元素并打开最近的模态窗口

Question

单击时我无法找到与按钮相关的元素。

在某些情况下，我正在循环浏览产品。每个产品都有自己的模态窗口，所以我希望能够在单击类名 .quick-cart 的按钮时打开与产品相关的模态窗口。

这是我必须尝试这样做的 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");