jquery - 单击添加购物车按钮时如何使用购物车计数增量

Question

我想要当添加按钮点击更多时购物计数增加...如何使用jquery

<header>
  <span class="shopcountwrap">
    <i class="shopping-cart"></i>
    <div class="bage">0</div>
  </span>
</header>

CSS

 header{
   text-align:right;
   width:700px;
   padding-top:10px;
}
.shopcountwrap{
    position:relative;
}
.bage{
   background-color: red;
    border-radius: 50%;
    color: white;
    height: 20px;
    left: 1px;
    line-height: 20px;
    padding: 0;
    position: absolute;
    text-align: center;
    top: -22px;
    width: 20px;
    z-index: 1;
 }

看我的 fiddle http://jsfiddle.net/kisspa/vZ66P/1/

Answer 1

您可以分两步完成此操作:

第 1 步:首先将 id 声明为保存计数的 div。如下所示:

  <div id="countHolder" class="bage">0</div>

第 2 步:为按钮声明 id，如下所示:

           <div id="cart1" class="addcart">Add Cart</div>

第 3 步:声明 javascript 数组变量来保存完成的结果:

    var completedIncrements =  [];  

第 4 步:然后在点击事件处理程序中使用如下所示的计数器增量函数。

 console.log(completedIncrements.indexOf(this.id));    

  if( completedIncrements.indexOf(this.id) == -1 ) {
  var count =   parseInt($("#countHolder").text());
   $("#countHolder").html(count + 1);

    completedIncrements.push(this.id);
}

注意:不要忘记添加上面提到的parseInt函数；否则计数变量将是文本类型而不是整数类型。

这里是jsfiddle为您提供工作示例。