如何实现点击Bootstrap卡片按钮展示对应ID的Modal内容？

你的问题根源在于循环生成卡片时，直接把所有数据的标题和长描述都追加到Modal元素里了，所以不管点击哪个按钮，Modal里都是所有内容的拼接。要实现点击按钮只显示对应ID的内容，我们需要调整逻辑：不在循环里提前填充Modal，而是在按钮触发Modal时，根据按钮的data-id匹配对应的数据，再动态填充Modal内容。

下面是具体的修改方案：

步骤1：修改循环代码，移除提前填充Modal的部分 #

原来的循环里最后两行是把所有条目的名称和长描述都加到Modal中，这部分要删掉，只保留卡片的生成逻辑：

var data = [
 {id: 0, name: 'Cause1', desc: 'This is cause 1', descLong: "This is a longer description of cause 1", votes: 10, votesTarg: 100, image: "https://via.placeholder.com/220"},
 {id: 1, name: 'Cause2', desc: 'This is cause 2', descLong: "This is a longer description of cause 2", votes: 20, votesTarg: 100, image: "https://via.placeholder.com/220"},
 {id: 2, name: 'Cause3', desc: 'This is cause 3', descLong: "This is a longer description of cause 3", votes: 30, votesTarg: 100, image: "https://via.placeholder.com/220"},
 {id: 3, name: 'Cause4', desc: 'This is cause 4', descLong: "This is a longer description of cause 4", votes: 40, votesTarg: 100, image: "https://via.placeholder.com/220"},
 {id: 4, name: 'Cause5', desc: 'This is cause 5', descLong: "This is a longer description of cause 5", votes: 50, votesTarg: 100, image: "https://via.placeholder.com/220"},
 {id: 5, name: 'Cause6', desc: 'This is cause 6', descLong: "This is a longer description of cause 6", votes: 60, votesTarg: 100, image: "https://via.placeholder.com/220"}
];

// 仅生成卡片，不提前填充Modal内容
for (var i=0; i < data.length; i++){
 document.getElementById('row').innerHTML += ("<div class='col-md-4'><div class='card mb-4 mt-4 shadow border-0'><img class='rounded-top' src='" + data[i]["image"] +"'/></div><div class='card-body'><h5 class='font-weight-bolder'>" + data[i]["name"] + "</span></h5><p> " + data[i]["desc"] + "</p><button type='button' class='btn btn-primary readmore' data-toggle='modal' data-target='#modal-info' data-id='" + data[i]["id"] + "' value='" + data[i]["id"] + "'>Read more</button></div><div class='card-footer auto'><p class='vote-counter text-center m-0 p-0'>" + data[i]["votes"] + " / " + data[i]["votesTarg"] + " signatures" + "</p></div><div class='progress rounded-bottom'><div class='progress-bar primary' role='progressbar' ariavalue='30' aria-valuemin='0' aria-valuemax='100'><span class='sr-only'>10% Complete</span></div></div></div></div>");
}

步骤2：添加Modal显示时的动态填充逻辑 #

我们可以利用Bootstrap的show.bs.modal事件（该事件会在Modal即将显示时触发），在事件回调中获取触发按钮的data-id，匹配对应数据后填充Modal：

// 监听Modal的显示前事件
document.getElementById('modal-info').addEventListener('show.bs.modal', function(event) {
  // 获取触发Modal的按钮元素
  var triggerButton = event.relatedTarget;
  // 从按钮的data-id属性中提取ID
  var causeId = parseInt(triggerButton.getAttribute('data-id'));
  
  // 从数据数组中找到匹配ID的条目
  var targetCause = data.find(item => item.id === causeId);
  
  // 填充Modal的标题和描述
  var modalTitle = document.getElementById('modal-title');
  var modalDesc = document.getElementById('modal-desc');
  
  modalTitle.textContent = targetCause.name;
  modalDesc.textContent = targetCause.descLong;
});

兼容旧浏览器的备选方案 #

如果需要支持不兼容Array.find的旧浏览器，可以用普通循环替代：

// 替代Array.find的兼容写法
var targetCause = null;
for(var j=0; j<data.length; j++){
  if(data[j].id === causeId){
    targetCause = data[j];
    break;
  }
}

这样修改后，点击每个卡片的按钮，Modal就只会显示对应ID的内容，不会再出现所有内容堆叠的问题。

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