javascript - 单击 jQuery 从相同的 div 中选择一个

Question

有一个无法解决的问题(我是 jScript 新手)。

我有 3 行，每行包含 4 个 block ，下面的 HTML 行( Bootstrap ):

<div class="row product-element">
      <div class="col-lg-3 col-md-3">
        <div class="product-element-container">
          <img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
          <h4>Some text H4</h4>
          <p>Some text p</p>
          <p>Some text p</p>
        </div>
        <a href="#" class="btn btn-success launch-modal" data-modal-id="modal-register" data-img-url="img/1_mini.jpg" title="buy">BUY</a>
      </div>
...
...
...
</div>

我还有模态窗口，当用户单击“购买”按钮时打开，我需要将

元素从“product-element-container”复制到模态窗口。

问题:我不知道如何在 jQuery 中创建正确的“选择”来选择按下按钮的 div。最好的方法是什么？

Answer 1

这是您想要做的事情的一个非常简单的实现:

$('a.launch-modal').click(function() {
    var content = $(this).siblings('.product-element-container').html();
    $('#modal-register').html(content);
});

首先，为所有 <a class="launch-modal"> 添加一个点击事件监听器元素，回调(即单击后发生的情况)获取相应 <div class="product-element-container"> 的 HTML 内容元素并将其放入 <div id="modal-register>