XML httprequest和Bootstrap模式的问题

Question

我正在用XML HTTPRequest使用外部JSON文件填充Bootstrap卡。这起作用，所有信息都显示在卡片中。 现在，我想按“更多信息”来打开Bootstrap模式，并提供有关该项目的更多信息。

问题是当我按“更多信息”时，始终将获取第一个项目1的数据。 我知道解决方案是我必须将元素的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>

bootstrap卡< /a>

bootstrap modal

Answer 1

问题是该按钮是指HTML ID。在这种情况下，每个按钮都具有目标exipplemodal，

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

因此您需要为每个按钮创建一个不同的目标，并添加#examplemodal之类的东西 - “+$ {arrobj [i] .id} .id}+”

您需要在按钮引用的模态类上进行。

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