问题描述
我目前正在尝试根据用户在products.html页面上的点击显示一个personal.html页面。例如，单击product1将显示product1的单个页面，单击product2将显示product2的单个页面，等等。
我的app.js文件中目前有一个UI类，其中包含显示信息的逻辑。
其中有一个名为displayIndividualProject()的函数，该函数具有一个事件侦听器，该事件侦听器说：“如果单击了卡片（if (event.target.classList.contains('img-container'))），则将该HTML结构注入到personal.html中”页面。但是，在我单击它之后，它没有注入序列。
另外，displayIndividualProduct代表personal.html页面，而displayProducts代表product.html页面。
这是我的UI类的一部分：
const individualProductsDOM = document.querySelector('.single-product');
class UI{
displayIndividualProduct(){
document.addEventListener("click",event => {
if (event.target.classList.contains('img-container'))
individualProductsDOM.innerHTML =
`
<div class='section-title'>
<h2>${product.title}</h2>
</div>
<div class='indi-img-container'>
<img src=${product.image} data-id='${product.id} alt="">
</div>
<div class="product-footer">
<h3>Estimated Cost: $ <span class='item-total'>0</span></h3>
<button class='bag-btn-2' data-id='${product.id}'>
<i class='fas fa-shopping-cart'></i>
add to cart
</button>
</div>
`
})
individualProductsDOM.innerHTML += `injected`;
}
displayProducts(products){
let result = '';
products.forEach(product => {
result += `
<article class="product" data-id='${product.id}'>
<div class='img-container'>
<a href='/individual.html'>
<img src=${product.image} alt="product" class='product-img' data-id='${product.id}'>
<button class='bag-btn' data-id='${product.id}'>
<i class='fas fa-shopping-cart'></i>
add to cart
</button>
</a>
</div>
<h3>${product.title}</h3>
<h4>$${product.price}/roll</h4>
</article>
`
});
//insert the products into the productsDOM
productsDOM.innerHTML = result;
}
}
这在我的JS底部通过ui.displayIndividualProduct();
document.addEventListener("DOMContentLoaded",() => {
const ui = new UI();
const products = new Products();
// setup app
ui.setupAPP();
//get all products
products.getProducts().then(products => {
//first display,then save,and then connect the add cart buttons
ui.displayProducts(products);
Storage.saveProducts(products);
}).then( () => {
ui.getBagButtons();
});
ui.displayIndividualProduct();
});
任何帮助将不胜感激！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）