如何动态追加文本到模态？

问题描述：

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

我需要在<p>文本追加到模体的DIV下与类read-more。

有什么建议吗？

UPDATE

我这样做：

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

我不知道什么问题，你有没有试过'$ HTML（$（' 读-more p'）。text（））' – jackJoe

@jackJoe问题不是文字的附加。这是取决于数据属性它应该显示一些文本。 – TheUnnamed

所以你想通过它的索引（我假设通过盘旋或某物）从“相关的”阅读更多的文本，是吗？并且目前您正在从所有阅读中获取文本，对吗？ – jackJoe

答

使用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

答

从我的意见后了解，我建议如下：

触发模式后，得到的内容读越多，你想，只是使用该文本并将其置于模式（不追加，追加添加到对象）。

像这样（例如，用于ID 1）：（”。读更多 '）。

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

我知道如何去做，但那不是动态的。 – TheUnnamed

如何动态追加文本到模态？

相关推荐