如何在JS中设置Modal窗口的exampleModalLongTitle与modalBody内容？

你遇到的问题核心是用错了DOM操作方法：.val()方法仅适用于表单元素（如<input>、<textarea>），而你的模态框标题是<h5>标签，属于普通文本元素，所以要用.text()或.html()来修改它的内容。

下面是修正后的完整代码，同时帮你实现模态框内容的设置：

修正后的JavaScript代码 #

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

function handleClick() {
  // 获取父元素中的内容
  const parent = this.parentNode;
  const fullContent = $(parent).find('.fullBody').html();
  // 这里可以根据需要获取标题，比如假设父元素里有个.title元素
  const modalTitle = $(parent).find('.title').text(); // 示例：获取标题文本

  // 显示模态框
  $('#exampleModalCenter').modal('show');
  
  // 设置模态框标题（用.text()或.html()，根据需求选择）
  $('#exampleModalLongTitle').text(modalTitle); 
  // 如果标题包含HTML内容，用.html()：$('#exampleModalLongTitle').html(modalTitle);

  // 设置模态框主体内容
  $('.modal-body').html(fullContent);
};

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

关键修改点说明 #

• 替换$('#exampleModalLongTitle').val('123')为$('#exampleModalLongTitle').text(你的标题内容)或.html()：
  • .text()：用于设置纯文本内容，会自动转义HTML标签
  • .html()：用于设置包含HTML结构的内容，适合渲染富文本
• 通过$('.modal-body').html(fullContent)将获取到的fullBody内容插入到模态框主体中
• 注意：如果你的标题不是从父元素的.title获取，替换成你实际的标题选择器即可

额外提示 #

如果不想混合原生JS和jQuery，也可以用纯原生JS实现：

function handleClick() {
  const parent = this.parentNode;
  const fullContent = parent.querySelector('.fullBody').innerHTML;
  const modalTitle = parent.querySelector('.title').textContent;

  const modal = document.getElementById('exampleModalCenter');
  const modalTitleEl = document.getElementById('exampleModalLongTitle');
  const modalBodyEl = modal.querySelector('.modal-body');

  // 设置内容
  modalTitleEl.textContent = modalTitle;
  modalBodyEl.innerHTML = fullContent;

  // 显示模态框（用Bootstrap的原生方法）
  const bootstrapModal = new bootstrap.Modal(modal);
  bootstrapModal.show();
}

内容的提问来源于stack exchange，提问作者pitten