Question

Stack Overflow世界！我一次又一次地使用松弛的信息，并且一直非常善于找到我的问题的答案。我已经被这个问题困扰了，我不是一个我知道足够多的Javascript人，并且我一直在努力做更多的事情。我试图为客户创建一张非常简约的购物卡。我附上了一张照片，并没有100％完成风格。

我使用sessionStorage并且能够编写代码以便我可以点击每种颜色和数量并使用setItem函数来存储数据，但我还想做什么是能够同时getItem并将其发布到cart.html我真的想保持这个简单，因为概念本身非常简单，我添加的所有价格都相同所以数学不应该太难。我很难绕着最简单的方式抓住保存的数据并在cart.html中正确显示它。

这是我的HTML

<div class="medium-4 cell">
  <div class="grid-x">
    <div class="cell small-4">
      <h6>Color</h6>
    </div>
    <div class="cell small-8">
      <div class="button-group round-button-group">
        <div class="button round-button active" id="mediumGreyButton">
        </div>
        <div class="button round-button" id="beigeButton">
        </div>
        <div class="button round-button" id="brownButton">
        </div>
        <div class="button round-button" id="lightGreyButton">
        </div>
        <div class="button round-button" id="sandButton">
        </div>
      </div>
    </div>
  </div>
</div>
<div class="medium-4 medium-offset-1 cell">
  <div class="button-group">
    <a href="#" class="button products__button products__cart">
      <i class="fas fa-shopping-basket"></i>
    </a>
    <form class="add-to-cart" action="cart.html" method="post">
      <button class="button products__button products__bag" onclick="cartButton()">
        Add to Bag
      </button>
    </form>
  </div>
</div>

我的样式代码和框架是Zurb，我通过SCSS运行它是产品部分的样式代码以及输入按钮$ margin-top = 100px; （万一有人想知道）。

SCSS

// Main Floss Stone Products Section

.products {
  margin-top: $margin-top;

.grid-container {
  padding-left: 0px;
  padding-right: 0px;
}

&__left-section {
 background-color: #e0eae5;
 height: 595px;
 padding-left: 3.4rem;
 padding-top: 5.5rem;

h1 {
  color: #111111;
  font-family: Poppins;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2.125rem;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}
h1, h3 {
  margin-bottom: 0;
}
p {
  color: #333333;
  font-family: Poppins;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.125rem;
  letter-spacing: 0.05rem;
  padding-right: 7.1rem;
  padding-top: 1rem;
}

.small {
  font-size: 0.688rem;
  font-weight: 400;
  padding-right: 25rem;
  font-style: italic;
  line-height: 1rem;
  margin-bottom: 0;
}

.button-grid {
  padding-top: 1.5rem;
}

.medium-4 {
  h6 {
    font-family: Poppins;
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    margin-top: 0.7rem;
    padding-left: 20px;
  }
  .round-button-group {
    margin-top: 0.4rem;
  }
}

.round-button {
  border-radius: 100%;
  width: 1.5rem;
  height: 1.5rem;
  border: 0.188rem solid #ffffff;
  margin-left: 5px;
  margin-right: 5px;
  &:nth-child(1) {
    background-color: #b7b7b7;
  }
  &:nth-child(2) {
    background-color: #c39968;
  }
  &:nth-child(3) {
    background-color: #7d4900;
  }
  &:nth-child(4) {
    background-color: #f2f0f0;
  }
  &:nth-child(5) {
    background-color: #534741;
  }
 }
}

.active {
 border: 0.188rem solid #8da3af;
}

&__button {
 background-color: #8da3af;
 color: white;
 height: 3.125rem;
 font-family: Poppins;
 font-size: 0.875rem;
 font-weight: 400;
 line-height: 2.125rem;
 text-transform: uppercase;
 padding: 0.5em 0.7em;
}

&__right-section {
  padding: 0;
  .orbit-container {
  height: 600px;
   img {
    height: 600px;
  }
}
.orbit-previous {
  margin-top: 27.5%;
  margin-left: 87%;
  width: 3.75rem;
  height: 3.688rem;
  background-color: #c39968;
}
 .orbit-next {
  width: 3.75rem;
  height: 3.688rem;
  background-color: #c39968;
  margin-top: 27.5%;
  }
 }
}


// Input Cart Section

$input-number-size: 80px;
 .input-group {
   margin-bottom: 0;
   background-color: #8da3af;
   color: white;
}

.input-number-group {
  display: flex;
  justify-content: center;
  width: auto;
  padding-top: 0.3rem;
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
  appearance: none;
}

.input-group-button {
 line-height: calc(#{$input-number-size}/2 - 5px);
}

.input-number {
  width: 40px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
  display: block;
  margin: 0;
  background-color: #8da3af;
  border: none;
  color: white;
  box-shadow: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
  height: $input-number-size/2;
  user-select: none;
  border-radius: $global-radius;
}

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: $input-number-size/2;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 400;
}

 .input-number-decrement {
   margin-right: 0.3rem;
 }

 .input-number-increment {
  margin-left: 0.3rem;
 }
}

// End Input Cart Section

这是我的JavaScript

<script>
$(function () {
    $(".round-button").click(function () {
      $('div').removeClass('active');
      $(this).addClass("active");
    });
  });
</script>
<script>
function cartButton() {
  let mediumGreyElement = document.getElementById('mediumGreyButton');
  let beigeElement = document.getElementById('beigeButton');
  let brownElement = document.getElementById('brownButton');
  let lightGreyElement = document.getElementById('lightGreyButton');
  let sandElement = document.getElementById('sandButton');




  if (mediumGreyElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Medium Grey Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }

  else if (beigeElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Beige Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else if (brownElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Brown Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else if (lightGreyElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Light Grey Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else if (sandElement.classList.contains('active')) {
    sessionStorage.setItem("product", "Sand Floss Stone");
    let qty = document.querySelector('input').value;
    sessionStorage.setItem("quantity", qty);
  }
  else {
    return
  }
}

</script>

Cart.HTML

    <form id="shopping-cart" action="cart.html" method="post">
    <table class="shopping-cart">
        <thead>
            <tr>
                <th scope="col">Item</th>
                <th scope="col">Qty</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</form>

Answer 1

如果您尝试在会话存储中存储多个产品，请将产品和数量保存到阵列中以获取产品和数量。
在购物车页面上从会话存储中检索该数组，然后您可以将其用于您的页面。
希望这会对你有所帮助。

你可以按照这个例子来解决问题。

＆＃13;

<!--Procut.html-->
    <!DOCTYPE html>
     <html>
     <body>
    	<input type="text" id="prod">
    	<input type="text" id="qty">
    	<button id="btn">Save</button>        
        <a href="cart.html">Cart</a>
           
           
    	<script type="text/javascript" charset="utf-8">
    	  let prod=document.getElementById("prod");
    	  let qty=document.getElementById("qty");
    	  let btn=document.getElementById("btn");
    	  let product=[], quantity=[];
    	  btn.addEventListener("click",function(){
    		newProd=prod.value;
    		newQty=qty.value;
    		let ArrIndex=product.indexOf(newProd);
    		if(ArrIndex<0){
    			product.push(newProd)
    			quantity.push(newQty);
    		}
    		else{
    			product[ArrIndex]  = newProd;
    			quantity[ArrIndex] = newQty;
    		}
    		 window.sessionStorage.setItem("product",product);
    		 window.sessionStorage.setItem("quantity",quantity);
    		  console.log(product);
    		  console.log(quantity);
    
    
    	  });
    	</script>
    </body>    
    </html>

＆＃13;

 <!--Cart.html-->
    

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>

    <body>
    <script>
    	
    let product=[], quantity=[];;
    product=window.sessionStorage.getItem("product").split(",");
    quantity=window.sessionStorage.getItem("quantity").split(",");
    console.log(product);
    for(let i=0;i<product.length;i++){
    	console.log("product : ",product[i] + ", quantity : ",quantity[i]);
    	console.log();
    }
    </script>
    </body>
    </html>

＆＃13;

带有sessionStorage购物车的GetItem

1 个答案: