原生JavaScript向Bootstrap Modal动态插入数组对象数据及GIF加载问题

问题根因 #

• 你目前的代码会把所有过滤得到的动作GIF都提前追加到模态框容器内，打开模态框时默认只会展示排在最前面的第一张GIF，无法匹配点击按钮对应的内容
• 渲染的动作按钮没有存储对应GIF的关联信息，点击时无法识别需要加载哪个资源
• 所有按钮都设置了相同的ID=myBtn，不符合DOM ID唯一规范，会导致潜在的选择器异常

修复步骤 #

1. 修改按钮渲染逻辑，绑定关联数据和点击事件 #

找到displayData函数中unique.forEach渲染按钮的代码块，替换为以下内容：

unique.forEach(element => {
    const div = document.createElement("div");
    const button = document.createElement("button");
    // 删除重复ID的错误设置
    button.innerHTML = element.name
    div.appendChild(button)
    div.className = "card"
    dataDiv.appendChild(div)

    button.className = "dButtons";
    button.setAttribute('data-toggle', 'modal');
    button.setAttribute('data-target', '#exampleModalCenter');
    button.setAttribute('type', 'button');
    // 给按钮存储对应动作的GIF地址和名称
    button.setAttribute('data-gif', element.gifUrl);
    button.setAttribute('data-name', element.name);
    // 绑定点击事件，动态更新模态框内容
    button.addEventListener('click', function() {
        const targetGif = this.getAttribute('data-gif');
        const targetName = this.getAttribute('data-name');
        // 更新模态框标题
        document.getElementById('exampleModalLongTitle').innerText = targetName;
        const modalImgContainer = document.getElementById('modalImg');
        // 清空之前的内容
        modalImgContainer.innerHTML = '';
        // 插入当前点击按钮对应的GIF
        const img = document.createElement('img');
        img.className = "appGifs";
        img.src = targetGif;
        img.style.maxWidth = '100%'; // 防止图片溢出模态框
        modalImgContainer.appendChild(img);
    })
});

2. 删除冗余代码 #

直接删掉displayData函数末尾整个uniqueImg.forEach的代码块，这段代码是提前把所有GIF塞进模态框的问题来源，已经不需要了。

修改完成后点击对应按钮，模态框就会加载对应动作的GIF资源。

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