如何動態地將文本附加到模式？

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：

我需要將div下<p>上的文本附加到模態主體上，並添加類read-more 。

有什么建議么？

更新

我這樣做：

$('#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());