jquery实现购物车物品加减 没效果,求解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery实现购物车物品加减 没效果,求解相关的知识,希望对你有一定的参考价值。

jq代码如下

$(function()
var t = $("#num_1");
$("#add").click(function()
t.val(parseInt(t.val())+1)
)
$("#min").click(function()
t.val(parseInt(t.val())-1)
)
);

body内对应代码如下
<td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="min" id="min1" /> <input id="num_1" type="text" value="1" class="num_input" "/> <img src="images/taobao_adding.jpg" alt="add" class="add" id="add1"/></td>

你选择器取错了,没取到两个按钮:
注意看,#是 id选择器,class选择器是以“.”开头的。
你的代码里面 加减两个按钮的 id分别为:add1 和 min1 而它们的class为: add和min
所以正确的做法是
$("#add") ---> $("#add1") 、 $("#min") ---> $("#min1")
或者
$("#add") ---> $(".add") 、 $("#min") ---> $(".min")
有不明白的欢迎追问^_^
参考技术A 把t放到click函数里面定义,试试~

jQuery实现购物车数字加减效果

效果图:

技术分享

jQuery实现购物车数字加减效果,方法本简单。

经常会写到购物车这块,而购物车很多就有加减这个效果(可以将HTML代码复制多个,同时支持),小小的总结了一下,代码如下:

HTML:

<div class="gw_num">
   <em class="jian">-</em>
   <input type="text" value="1" class="num"/>
   <em class="add">+</em>
</div>

 css:

.gw_num{border: 1px solid #dbdbdb;width: 110px;line-height: 26px;overflow: hidden;}
.gw_num em{display: block;height: 26px;width: 26px;float: left;color: #7A7979;border-right: 1px solid #dbdbdb;text-align: center;cursor: pointer;}
.gw_num .num{display: block;float: left;text-align: center;width: 52px;font-style: normal;font-size: 14px;line-height: 24px;border: 0;}
.gw_num em.add{float: right;border-right: 0;border-left: 1px solid #dbdbdb;}

 jQuery:

$(document).ready(function(){
 //加的效果
 $(".add").click(function(){
   var n=$(this).prev().val();
   var num=parseInt(n)+1;
   if(num==0){ return;}
      $(this).prev().val(num);
 });
 //减的效果
 $(".jian").click(function(){
   var n=$(this).next().val();
   var num=parseInt(n)-1;
   if(num==0){ return}
   $(this).next().val(num);
  });
});

 


以上是关于jquery实现购物车物品加减 没效果,求解的主要内容,如果未能解决你的问题,请参考以下文章

jquery问题购物车加减按钮

JQuery模拟实现天猫购物车动画效果

jquery-实现加入购物车效果

jquery 物品加入购物车动画效果

如何用jquery实现购物车加减

web框架实现购物车数量加减