Question

我为购物车创建了一个简单的功能，将商品数量添加到购物车（从柜台）。现在我需要对它进行一些更改，但我不知道如何做到这一点。当我点击“添加到卡片”时，项目进入购物车，然后我需要这个按钮来改变它的行为，它的名字是“从购物车中删除”，所以点击它就会删除项目（在柜台中列出）我的购物车 - ＆gt;并将其行为更改为默认值（添加到购物车）。我需要像切换它的行为，一些想法我怎么能这样做？非常感谢!!!

var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var amount = document.getElementById('amount');
var button2 = document.getElementById('add');
var cart = document.getElementById('cart'); 


    count = 1;

    plus.onclick = function() {
      count += 1;
      amount.innerHTML = count;
    };

    minus.onclick = function(){
      if (count === 1) return;
      count-=1;
      amount.innerHTML =count;
    };
 
    button2.onclick = function(){
      cart.innerHTML = "products:" + count;
    }

body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 20pt;
  font-weight: normal;
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow);
  /* Standard syntax */
}

.main {
  height: 200px;
  margin: 100px auto;
  text-align: center;
}

button {
  padding: 20px 25px;
  background: transparent;
  font-size: 18pt;
  border: 1px solid gold;
  color: yellow;
  outline: 0;
}
#add{
  
}

<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="main">

    <button id="minus">Minus</button>
    <div id="amount"> 1</div>
    <button id="plus">plus</button>
   
    
    <button id="add">add to cart</button>
    <div id="cart">products: </div>
    
  </div>
</body>

</html>

Answer 1

如果您的按钮处于添加到购物车模式或从购物车模式中删除，则需要存储信息。您可以通过在boolean变量旁边创建count类型的另一个变量来实现此目的：

var count = 1;
var cartIsEmpty = true;

然后在单击按钮时检查它的值并更新它，以便它始终告诉您此时购物车是否为空。在途中您也可以更改按钮文本：

button2.onclick = function(){
    if (cartIsEmpty === true) {
        cartIsEmpty = false;
        button2.innerHTML = "remove from cart";
        cart.innerHTML = "products:" + count;
    } else {
        cartIsEmpty = true;
        button2.innerHTML = "add to cart";
        cart.innerHTML = "products:";      
    }
}

完整代码：

＆＃13;

var plus = document.getElementById('plus');
var minus = document.getElementById('minus');
var amount = document.getElementById('amount');
var button2 = document.getElementById('add');
var cart = document.getElementById('cart'); 


    var count = 1;
    var cartIsEmpty = true;

    plus.onclick = function() {
      count += 1;
      amount.innerHTML = count;
    };

    minus.onclick = function(){
      if (count === 1) return;
      count-=1;
      amount.innerHTML =count;
    };
 
    button2.onclick = function(){
      if (cartIsEmpty === true) {
        cartIsEmpty = false;
        button2.innerHTML = "remove from cart";
        cart.innerHTML = "products:" + count;
      } else {
        cartIsEmpty = true;
        button2.innerHTML = "add to cart";
        cart.innerHTML = "products:";      
      }
    }

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 20pt;
  font-weight: normal;
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow);
  /* Standard syntax */
}

.main {
  height: 200px;
  margin: 100px auto;
  text-align: center;
}

button {
  padding: 20px 25px;
  background: transparent;
  font-size: 18pt;
  border: 1px solid gold;
  color: yellow;
  outline: 0;
}
#add{
  
}

＆＃13;

<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="main">

    <button id="minus">Minus</button>
    <div id="amount"> 1</div>
    <button id="plus">plus</button>
   
    
    <button id="add">add to cart</button>
    <div id="cart">products: </div>
    
  </div>
</body>

</html>

＆＃13;

Answer 2

以下内容会跟踪当前的购物车数量，并允许无限次的添加删除。使用jquery来提高效率。 CSS没有变化。

var plus =  document.getElementById('plus');
var minus = document.getElementById('minus');
var amount = document.getElementById('amount');
var button2 = document.getElementById('add');
var cart = $("#cart"); 


    count = 1;
    
    plus.onclick = function() {
      count += 1;
      amount.innerHTML = count;
    };

    minus.onclick = function(){
      if (count === 1) return;
      count-=1;
      amount.innerHTML =count;
    };
    
    $("#add").click(function(){
    if ($(this).hasClass( "add" )) {
    	 cart.innerHTML = "products:" + count;
       $(this).removeClass("add");
       $(this).addClass("remove");
       $(this).html("remove from cart");
       new_value = parseInt(cart.attr("value")) + count
    }else{
    	$(this).removeClass("remove");
      $(this).addClass('add');
      $(this).html("add to cart");
      new_value = parseInt(cart.attr("value")) - count;
    }
    cart.attr("value", new_value);
    cart.text("products: " + new_value);
  });

body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 20pt;
  font-weight: normal;
  background: red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow);
  /* Standard syntax */
}

.main {
  height: 200px;
  margin: 100px auto;
  text-align: center;
}

button {
  padding: 20px 25px;
  background: transparent;
  font-size: 18pt;
  border: 1px solid gold;
  color: yellow;
  outline: 0;
}
#add{
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>

<body>
  <div class="main">

    <button id="minus">Minus</button>
    <div id="amount"> 1</div>
    <button id="plus">plus</button>
   
    
    <button id="add" class="add">add to cart</button>
    <div id="cart" value=0 >products: </div>
    
  </div>
</body>

</html>

单击后如何更改按钮行为？更改“从购物车中删除”中的“添加到购物车”按钮，这是行为

2 个答案: