加载时修改模式窗口中的数据答案

【问题标题】：Modify data in a modal window when loading it加载时修改模式窗口中的数据
【发布时间】：2019-09-17 22:25:20
【问题描述】：

我有一个带有用户注释的演示文稿。按钮处理对我有用，会出现一个模式窗口。现在我需要在下载时设置它的标题和正文。我从按钮的父类获取body，没问题。

这是我的代码：

const buttons = Array.from(document.querySelectorAll('.card .btn-info'));

function heangleClick() {
  const parent = this.parentNode;
  console.log($(this).parent().find('.fullBody').html());
  $('#exampleModalCenter').modal('show');
  $('#exampleModalLongTitle').val('123'); // not work

};

buttons.forEach((button) => {
  button.addEventListener('click', heangleClick);
});

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script src="~/js/showTittleTodo.js"></script>

js文件exampleModalLongTitle和modalBody如何设置值

【问题讨论】：

尝试先设置信息再显示模态

标签： javascript c# jquery html asp.net-core

【解决方案1】：

你试试下面哪个不行。

$('#exampleModalLongTitle').val('123');// not work

请替换下面而不是那个

$('#exampleModalLongTitle').text('123');

【讨论】：

【解决方案2】：

尝试设置 html 或 text 代替 val。

$('#exampleModalLongTitle').html('123');

【讨论】：

【解决方案3】：

试试这个代码：

$('#exampleModalCenter').modal('show');    

$('#exampleModalCenter').on('shown.bs.modal', function() {
    $('#exampleModalLongTitle').val('123');
})

【讨论】：

【解决方案4】：

如下更新你的js，在模态元素上使用shown.bs.modal事件你可以附加一个回调，当模态窗口完全是shown时触发

const buttons = Array.from(document.querySelectorAll('.card .btn-info'));

function heangleClick() {
  const parent = this.parentNode;
  console.log($(this).parent().find('.fullBody').html());
  $('#exampleModalCenter').one('shown.bs.modal', function() {
    $('#exampleModalLongTitle').val('123');
  })
  $('#exampleModalCenter').modal('show');
};

buttons.forEach((button) => {
  button.addEventListener('click', heangleClick);
});

【讨论】：