我正在从本地存储中获取一些数据到一个新的页面购物车中，它显示了所有数据，但在布局中，以我想要的方式

Posted 2023-03-05

技术标签:

【中文标题】我正在从本地存储中获取一些数据到一个新的页面购物车中，它显示了所有数据，但在布局中，以我想要的方式【英文标题】：i am getting some data from local storage into a new page cart and it is showing all the data but in the layout, in the way i want 【发布时间】：2021-12-21 22:05:48 【问题描述】：

请帮助我 ....我正在关注一个 youtube 视频，我正在创建购物车，我正在从本地存储中获取数据，我想以下列方式显示数据 “bookimage”和 Name 应该在 PRICE Quantity 下的“TITLE”价格下 Quantity 下和 Total 下 TOTAL 下...但是我将东西显示在另一个下...如所附图片所示enter image description here 当我使用 Display:flex;属性，我将所有结果放在一行中，例如如果我有 2,0 多个结果，我希望它们在单独的一行中......请帮助

这是我的 html

<body>
  <form id="form1" runat="server">
    <header>
      <div class="overlay">
        <nav>
          <h2>shop</h2>
          <ul>
            <li class="nav-item">                              
              <asp:LinkButton ID="btnCart" class="btncart" runat="server">CART<span class="cartspan" style="color:lightslategrey"> 0</span></asp:LinkButton>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="products-container">
      <div class="product-header">
        <h5 class="product-title"> TITLE</h5>
        <h5 class="price">PRICE</h5>
        <h5 class="quantity">QUANTITY</h5>
        <h5 class="total">TOTAL</h5>
      </div>
      <div class="products"></div>
    </div>
  </form>
  <script src="MyCustomJS/AddToCart.js"></script>
</body>

这是样式

.conatiner,.products-container
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:50px;
  padding-bottom:100px;


.products-container 
  max-width:650px;
  justify-content:space-around;
  margin:0 auto;
  margin-top:50px;

.product-header
  width:100%;
  max-width:650px;
  display:flex;
  justify-content:flex-start;
  border-bottom:4px solid lightgrey;
  margin:0 auto;

.product-title
  width:45%;

.price
  width:15%;
  display:flex;
  align-items:center;

.quantity
  width:30%;
  border-bottom:1px solid lightgrey;
  display:flex;
  align-items:center;

.total
  width:10%;
  border-bottom:1px solid lightgrey;
  display:flex;
  align-items:center;

.product
  width:45%;
  max-width:650px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid lightgrey;

这是 JS 功能之一

function displayCart()

    let cartItems = localStorage.getItem('ProductsinCart');
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products")
    if(cartItems && productContainer)
    
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => 
          productContainer.innerHTML += `
            <div class="product">
              <img src="./imagesForCart/$item.tag.jpg">
              <span>$item.name</span>
            </div>
            <div class="price">$$item.price.00 </div>
            <div class="quantity">$item.inCart </div>
            <div class="total">$item.inCart * item.price </div>`
        );

【问题讨论】：

.price !==pricce 所以<div class="pricce"> 将忽略该css规则是的，我把它改成了价格，但问题还没有解决 .products-container 设置为flex，但我相信默认的wrap 属性是column，因此继承可能发挥了作用，并迫使这些元素进入列布局。跨度> 【参考方案1】：

我变了

.products
      width:100%;
        max-width:650px;
        display:flex;
        justify-content:flex-start;
        margin:0 auto;
        border-bottom:1px solid lightgrey;
    
    .product
        width:45%;

和<div class="price">$$item.price.00 </div>

【讨论】：

感谢您的回答，但兄弟这会将所有行数据放在一行中...... 如果您需要快速结果，您需要为此创建有效的 sn-p。

以上是关于我正在从本地存储中获取一些数据到一个新的页面购物车中，它显示了所有数据，但在布局中，以我想要的方式的主要内容，如果未能解决你的问题，请参考以下文章