javascript - 产品在我的购物车中的显示问题
问题描述
我尝试将 localstorage 中的所有产品显示到我的购物车页面,但只有第一个元素是正确构建的(在 localstorage 中一切正常)。我使用 javascript:
for(produit = 0; produit < produitLocalStorage.length; produit++){
let fullCartTemplate = document.querySelector('#template_full_card');
newNodeFullCart = document.importNode(fullCartTemplate.content, true);
document.querySelector('#basket_container').appendChild(newNodeFullCart);
document.querySelector('#name').textContent = `${produitLocalStorage[produit].name}`;
document.querySelector('#reference').textContent = `Réf : ${produitLocalStorage[produit]._id}`;
document.querySelector('#price').textContent = `${produitLocalStorage[produit].quantity} x ${produitLocalStorage[produit].price},00€`;
document.querySelector('#total_price_product').textContent = `${produitLocalStorage[produit].price*produitLocalStorage[produit].quantity},00€`;
document.querySelector('#number').setAttribute('value', `${produitLocalStorage[produit].quantity}`);
document.querySelector('#picture_product').setAttribute('src', `${produitLocalStorage[produit].image}`);
我在 html 代码中的模板:
<template id="template_full_card">
<div id="recapitulatif_order">
<div class="product_card">
<img id="picture_product" src="" alt="photo produit">
<div id="name_reference">
<span id="name"></span>
<span id="reference"></span>
</div>
<input id="number" type="number" value="" min="" max="">
<div id="price_trash">
<span id = "price"></span>
<span id="total_price_product"></span>
<span id="trash_logo">
<i class="far fa-trash-alt"></i>
</span>
</div>
</div>
</div>
</template>
我有每个元素的结构,但没有变量的值。我尝试在课堂上更改我的身份证,但没有任何改变
解决方案
推荐阅读
- c# - EF Core、Sqlite、InMemory、代码优先——如何?
- excel - Outlook 邮件间歇性地不使用 Excel VBA 发送
- iso8583 - 我的 jpos ISO8583 实现一直在消息长度前加上“1”
- java - 具有与 POJO + Jackson 相同名称和不同类型的 anyOf 字段的 Json 模式
- c++ - 如何计算向量中矩阵的实例?
- permissions - 是否可以在字段级别添加对象权限
- palantir-foundry - 在代码工作簿中使用代码存储库
- python - 启动 sr.Microphone() 时显示 ALSA 错误
- sql - EF Core - 如何舍入 DB 值以最小化 json?
- html - 为什么浮动标签不适用于css