购物网站总结

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

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

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

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