Question

有一个无法解决的问题（我是jScript中的新手）。

我有3行，每行包含4个块，下面是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>

我还有模态窗口，当用户点击＆＃34;购买＆＃34;按钮，我需要复制＆＃34; product-element-container＆＃34;中的

元素。到模态窗口。

问题：我不知道如何创建适当的＆＃34;选择＆＃34;在jQuery中将使用按下按钮选择div。这样做的最佳方式是什么？

Answer 1

您可以在按钮点击事件回调功能中使用$(this).siblings('.product-element-container')。

Answer 2

这是您尝试做的非常简单的实现：

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

首先，向所有<a class="launch-modal">元素添加一个on click事件监听器，回调（即点击后会发生什么）获取相应<div class="product-element-container">元素的HTML内容并将其放入{ {1}}

Answer 3

首先在容器中为要复制的h4和p标签提供类。

第二次添加一个属性，例如data-btnId =＆＃34; button id＆＃34;按钮。

下一个bootstrap在模态打开show.bs.modal和shown.bs.modal上有一个事件，它在打开时触发，在模态分别在页面上呈现后。

   $( '#your modal id" ).on
    ('show.bs.modal' , function
    (event) {
    var button =
    $(event.relatedTarget) //  Button that triggered the modal
     var recipient = button.data
   ('btn id here which is inside container' ) //   Extract info  from data-* attributes

    var modal = $( this)
    modal.find( "h4").text( receipt.   parent(".    containerClassNameHereWhoseContentToBeCopied").   find("h4.classNameOfH4TagHereWhich.   IsInsideContainer).text());

    // Do same for P tags.
 })

注意*你的模态应该有h4和p标签。或者您可以将值/文本放到任何标记中。

点击jQuery从相同的div中选择一个

3 个答案: