</pre><pre name="code" class="html">$(document).ready(function(){
$(".buy").on("click",function(e){
//购买按钮功能
var $parent=$(this).parent().parent(), //选取对象
$spmc = $parent.find('h2').eq(0).text(), //选取商品名称
$price = $parent.find('span').eq(0).html(), //选取价格
$aa = '<div class="nb"><input type="text"value="1"></input><div class="nb-top"></div><div class="nb-bm"></div></div>'//数量框
$dx = $(".tc").find('.tbhd').eq(0); //物品列表
var $list=$('<div class="bbb"><h4 style="width: 400px";>'+$spmc+'</h4>'+'<h4 style="width: 100px;">'+$price+'</h4>'+'<h4 style="width: 100px;">'+$aa+'</h4>'+'<h4 style="width: 100px;">'+'18.8'+'</h4></div>'); //要加!!!!$!!!!如果不加,会导致后面$list.sibling()不能定义
$($dx).append($list); //将物品信息添加到物品列表
$list.siblings().each(function(){
if ($(this).find('h4').eq(0).text()==$spmc) //如果名称有重复的
{
var $text=$(this).find(':text');//将数量值赋值
$text.val(function(){return parseInt(this.value)+1});//值加1 注意写法!!!
$list.remove();//除去重复的新加物品信息
var $qs=$(this).find('h4').eq(3);//定义小计的位置
var $money=parseInt($price)*$text.val(); //计算数量乘以价格
$qs.text($money)//赋值
$alltotal=0; //总值赋值
for (var i = 0; i < $(".bbb").length; i++) {
$alltotal+=parseInt($(".bbb:eq("+i+")").find("h4").eq(3).html());//注意$(".bbb:eq("+i+")")的写法
};
$(this).parent().next().find('p').eq(1).html($alltotal);//总值变化
}
});//检查添加物品信息是否重复模块
$0img = $parent.find('img').eq(0) //选取图片
$img = $0img.clone(); //复制图片
$parent.children().eq(1).append($img); //添加图片
$img.animate({ //图片自定义动画
height: '60px', //高变为60
width: '60px' //宽变为60
}, 500,function(){ //执行回调函数
$(this).animate({
left:'+=40px',
top:'-=40px'},500,function(){
$(this).offset({ //图片到达指定位置
top:420,
left:1100}).remove(); //图片消失
});
}); //动画效果结束
});
$(document).on('click','.nb-top',function(){ //!!!!!!!!动态绑定事件!!!!!!! 定义数量上函数
var $input = $(this).parent(); //选取对象
var n = $input.find("input").eq(0); //选取框中值
n.val(parseInt(n.val())+1); //点一次加一
setTotal(this); //执行函数
});
//数量上函数定义完毕
$(document).on('click','.nb-bm',function(){ //!!!!!!!!动态绑定事件!!!!!!! 定义数量下函数
var $input = $(this).parent(); //选取对象
var n = $input.find("input").eq(0); //选取框中值
n.val(parseInt(n.val())-1) //点一次减一次
if(parseInt(n.val())<0) //如果框中值小于0
{n.val(0);} //框中值就一直为0
setTotal(this); //执行函数
}); //数量下函数定义完毕
function setTotal(e){ //定义当前函数e e代表this
var $sl = $(e).parent().find('input').val();//选取数量
var $jg = parseInt($(e).parent().parent().prev().text().substr(0)); //选取价格
var $total=$sl*$jg;
var $xj = $(e).parent().parent().parent().find('h4').eq(3); //选取小计
$xj.html(parseFloat($total)); //小计赋值
$alltotal=0;
for (var i = 0; i < $(".bbb").length; i++) {
$alltotal+=parseInt($(".bbb:eq("+i+")").find("h4").eq(3).html());
};
$(e).parent().parent().parent()
.parent().parent().find(".all")
.eq(0).find('p').eq(1)
.html($alltotal); //将总值赋到总值文本框
};
});
动态绑定事件是指:需要绑定的元素(‘.nb_top’)是其他按钮出发后才生成的,是动态的,所以就要全篇文章document生成后才能执行这个按钮
——————————————————————————————————分割线——————————————————————————————————————
这是第一篇博客,以后写程序遇到的问题就记录到这里,方便以后复习。
这个问题卡了好几天,最后是在别人的帮助下完成的,自己思考的话效率非常低,以后自己想不出来就要去请教别人。