XML HttpRequest 和引导模式的问题

Question

我正在通过 XML HttpRequest 用外部 json 文件填充引导卡。 这有效，所有信息都显示在卡片中。 现在我想按“更多信息”打开一个引导模式，其中包含有关该项目的更多信息。

问题是当我按下“更多信息”时，总是会获取第一个 item1 的数据。 我知道解决方案是我必须将元素的 id 传递给模态，以便可以检索到元素的正确数据。

但我不明白如何将项目的 id 传递给模态？

JSON文件

[{
    "id": 1,
    "name": "item1",
    "price": "€5",
    "size": "XS",
    "color": "Green"
}, {
    "id": 2,
    "name": "item2",
    "price": "€10",
    "size": "S",
    "color": "Yellow"
}, {
    "id": 3,
    "name": "item3",
    "price": "€15",
    "size": "M",
    "color": "Blue"
}, {
    "id": 4,
    "name": "item4",
    "price": "€20",
    "size": "L",
    "color": "Red"
}, {
    "id": 5,
    "name": "item5",
    "price": "€25",
    "size": "XL",
    "color": "Gray"
}, {
    "id": 6,
    "name": "item6",
    "price": "€30",
    "size": "XXL",
    "color": "Black"
}] 

我的程序的 JS 脚本

<script>
    const divRes = document.querySelector('#divResult');

    myRequest = () => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'files/elements.json', true);
        xhr.send();
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status != 200) {
                    divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
                } else {
                    const arrResponse = JSON.parse(xhr.responseText);
                    divRes.innerHTML = createHTMLCard(arrResponse);
                }
            }
        };

        xhr.onerror = function() {
            divRes.innerHTML = "Request failed";
        };
    }

    createHTMLCard = (arrObj) => {
        let res = '';

        for (let i = 0; i < arrObj.length; i++) {
            res +=
                `<div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card m-2">
                            <div class="card-body">
                                <h5 class="card-title">${arrObj[i].name}</h5>
                                <p><strong>Prijs:</strong> ${arrObj[i].price}</p>
                                <button id="moreInfo" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">More info</button>
                            </div>
                        </div>
                 </div>



                 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">${arrObj[i].name}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p><strong>Price:</strong> ${arrObj[i].price}</p>
                                    <p><strong>Size:</strong> ${arrObj[i].size}</p>
                                    <p><strong>Color:</strong> ${arrObj[i].color}</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                 </div>`;
        }
        return res;
    }

    window.addEventListener('load', myRequest);
</script>

引导卡

引导模式

Answer 1

问题是按钮是指一个html id。 在这种情况下，每个 Button 都有目标exampleModal

<button [..] data-bs-target="#exampleModal">More info</button>

因此，您需要为每个按钮创建一个不同的目标并添加类似#exampleModal-"+${arrObj[i].id}+"

您需要在按钮所指的模态类上执行相同的操作。

<div class="modal fade" id="exampleModal-"+${arrObj[i].id}+" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">`