购物网站总结

</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生成后才能执行这个按钮

——————————————————————————————————分割线——————————————————————————————————————

这是第一篇博客，以后写程序遇到的问题就记录到这里，方便以后复习。

这个问题卡了好几天，最后是在别人的帮助下完成的，自己思考的话效率非常低，以后自己想不出来就要去请教别人。