javascript - 单击查找元素并打开最近的模式窗口

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');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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

你并不真的需要 sibling 并找到。接下来就可以了

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