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

我需要使用类<p>将div下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的例子）：

var input = "PercentageValue = 99.9,\r\nCaseID = 9745683 PercentageValue = 90.3,\r\nCaseID = 9387593 PercentageValue = 88.6,\r\nCaseID = 4893448";
var res, resArray = [], re = /PercentageValue = (.*),\r\nCaseID = (\d*) ?/g; 
while (res = re.exec(input)) 
   resArray.push({PercentageValue: res[1], CaseID: res[2]})

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

2 个答案: