如何动态地将文本附加到一个模态中？

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函数，到目前为止，我要为类read-more的每个元素添加一个data-attr

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;DR：

我需要用类<p>将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

Answer 2

根据我在评论后的理解，我建议如下：

触发模式后，获取您想要的读-更多的内容，只需使用该文本并将其放在模态中(而不是附加，添加到对象中)。

如下所示(例如id 1)：

$('#myModal .modal-body').html($("[data-attr=1] > p").text());