当我点击添加购物车按钮时如何使用购物车计数增量

时间:2014-07-17 04:00:32

标签: jquery css

当添加按钮点击更多时我想要购物计数增量... 如何使用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;
 }

看我的小提琴http://jsfiddle.net/kisspa/vZ66P/1/

1 个答案:

答案 0 :(得分:0)

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

步骤1:首先将id声明为包含count的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 功能,如上所述;其他明智的计数变量将是text类型而不是Integer。

这是jsfiddle工作示例。