javascript - JavaScript Modal 无法正常加载动态数据

Question

当我关闭第一个模态并打开第二个模态时，第一个模态也保留在第二个模态中。第三个也一样。给定的输出图像

HTML CODE: 

<div class="modal" id="myModal">
      <div class="modal-dialog">
          <div class="modal-content" id="details-single">
          </div>
      </div>
</div>

JS CODE:

const itemDiv = document.getElementById('details-single');
const displayItem = item => {
    
    const div = document.createElement('div');
  div.innerHTML = `
 
            <div class="modal-header">
                <img class="product-image" src=${item.image}></img>
                <h5 class="modal-title">${item.title}</h5>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                ${item.description}
            </div>
            <div class="modal-footer">
                <button id="close" class="details" data-dismiss="modal">Close</button>
                <button onclick="addToCart(${item.id},${item.price})" id="addToCart-btn" 
                 class="add-btn">Add to Cart</button>
            </div>
        
  `;
  itemDiv.appendChild(div);
 
};

输出图像输出图像 2

标签： javascriptmodal-dialog