javascript - 如何动态地将文本附加到模式中？

Question

我有这个html

<div class="col-md-6">
    <div class="jumbotron">
        <a href="#" data-toggle="modal" data-target="#myModal">read more...</a>
        <div class="read-more hidden">
            <p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
        </div>

    </div>
</div>
<div class="col-md-6">
    <div class="jumbotron">
        <a href="#" data-toggle="modal" data-target="#myModal">read more...</a>
        <div class="read-more hidden">
            <p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
        </div>

    </div>
</div>

这是模式的部分，我需要在元素中附加类 read-more 的文本。

<div class="modal-body">
    <!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>

这是我到目前为止所拥有的 jQuery 函数，我在其中添加了 data-attr对于类 read-more 的每个元素:

jQuery(document).ready(function($) {
    var $readmore = $('.read-more');
    var $readmoreParagraph = $('.read-more p');
    $readmore.each(function(i, el) {
        var $dataAttr = $(el).attr('data-attr', i);                   
    });
});

要获得此输出:

<div class="read-more" data-attr="0">
    <p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>

TL；博士:

我需要将 <p> 上的文本附加到模式主体中在类 read-more 的 div 下.

有什么建议吗？

更新

我这样做了:

$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));

但结果我在模态主体中得到了这个:

1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL

Answer 1

使用 show.bs.modal 事件在每次显示时更改正文的内容。

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget), // Button that triggered the modal
      content = button.siblings('.read-more').html(),
      modal = $(this);

  modal.find('.modal-body').html(content);
});

参见http://getbootstrap.com/javascript/#modals-related-target