商品编辑
描述：主要是根据选中事件选中或取消，编辑DOM元素错做，增加，删除，修改。
功能：用户选择某一个商品时，标记选中的商品，在商品栏中添加选中的商品并计算商品的总价钱。
当用户取消选中商品或点击商品栏中的删除按钮时，删除对应的商品，取消商品的标记并重新计算价钱。
在商品列表中ul(id:accradio)中，每一个li属性上记录商品的ID，price，name等等基本信息。
在商品栏中ul(id:chooselist)中，记录li属性上的商品的ID，price，name等等基本信息。
备注：在计算价钱时，由于javascript本身的bug，会显示有偏差。
javscript中计算浮点数时有精度误差bug。
例如：
0.8 + 0.9 = 1.7000000000000002
并非是1.7
处理浮点数精度的bug：
function fixedNumber(t){ if(-1==t.toFixed(2).toString().indexOf(".")){ return (t.toFixed(2).toString()); }else{ return (t.toFixed(2).toString().replace(/(.+?)(0{1,})$/,"$1").replace(/(.+)\.$/,"$1")); } }
效果如下图：
商品编辑续例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>商品编辑续</title> <style> *{margin:0px;padding:0px;list-style: none; font-size: 12px; line-height: 20px;} .clearfix{*zoom:1;} .clearfix:after{content:"\0020";display:block;height:0;clear:both;overflow:hidden;visibility:hidden;} .main{ position: relative; width: 960px; margin: 0px auto;} .accradio{width: 760px;} .accradio li{float:left;width: 180px; text-align: center; margin: 0px 5px 10px 5px; } .accradio li em{display: inline-block; width: 14px; height: 14px; border: 1px solid #dedede; background: #fff;border-radius: 4px; vertical-align: -3px; *vertical-align: 0px; margin-right: 6px;} .accradio li em.on{background: #f60; border:1px solid #f81;} .choose{position: fixed; right:0px; top:0px; z-index: 1; width: 260px; border: 1px solid #ebebeb;} .choose .title{height: 44px; line-height: 44px; color: #333; font-size: 18px; background: #f7f7f7; padding-left: 10px;} .choose .showlists{padding: 10px 10px 10px 10px;} .choose li{ position: relative; height: 30px; line-height: 30px; } .choose li .delList{position: absolute; right: 0px; cursor: pointer;} .choose .chooseprice{text-align: right; color: #f60; font-size: 14px;} </style> </head> <body> <div class="main"> <ul id="accradio" class="accradio clearfix"> <li gid="1001" gname="商品1" price="100"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品1</a></p> <em></em> 100元 <input type="hidden" name="name1" /> </li> <li gid="1002" gname="商品2" price="30"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品2</a></p> <em></em> 30元 <input type="hidden" name="name2" /> </li> <li gid="1003" gname="商品3" price="9.9"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品3</a></p> <em></em> 9.9元 <input type="hidden" name="name3" /> </li> <li gid="1004" gname="商品4" price="99.9"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品4</a></p> <em></em> 99.9元 <input type="hidden" name="name4" /> </li> <li gid="1005" gname="商品5" price="200"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品5</a></p> <em></em> 200元 <input type="hidden" name="name5" /> </li> <li gid="1006" gname="商品6" price="88"> <a><img alt="" width="180px" height="180px" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_test1.jpg" /></a> <p><a>商品6</a></p> <em></em> 88元 <input type="hidden" name="name6" /> </li> </ul> <div class="choose"> <div class="title">选择的商品</div> <div class="showlists"> <ul id="chooselist"></ul> <div id="showmsg">挑选您所需要的商品</div> <p id="chooseprice" class="chooseprice"></p> </div> </div> </div> <script type="text/javascript" src="http://files.cnblogs.com/kuikui/jquery.js"></script> <script> var chooseAcc={ init: function(){ var _this = this; this.accradio = $("#accradio"); this.chooselist = $("#chooselist"); _this.events(); }, events: function(){ var _this = this; _this.checkboxAction(); _this.listsAction(); }, checkboxAction: function(){ var _this = this; _this.accradio.find("li").click(function(){ var $this = $(this); if($(this).find("input").attr("checked")){ _this.del($this); } else{ _this.add($this); } }); }, listsAction: function(){ var _this = this; _this.chooselist.find(".delList").live("click",function(){ var tmpid = $(this).parent().attr("data-gid"); _this.del(_this.accradio.find("li[gid="+tmpid+"]")); }); }, fixedNumber:function (t){ if(-1==t.toFixed(2).toString().indexOf(".")){ return (t.toFixed(2).toString()); }else{ return (t.toFixed(2).toString().replace(/(.+?)(0{1,})$/,"$1").replace(/(.+)\.$/,"$1")); } }, add: function(obj){ var _this = this; obj.find("input").attr("checked",true); obj.find("em").addClass("on"); if(_this.chooselist.find("li[name="+obj.attr("gname")+"]").length!==0){ $("li[name="+obj.attr("gname")+"]").attr({"data-price":obj.attr("price"),"data-gid":obj.attr("gid"),"title":obj.attr("gname")}).html(obj.attr("gname")+"<span class='delList'>×</span>"); } else{ _this.chooselist.append("<li data-gid="+obj.attr("gid")+" data-price="+obj.attr("price")+" title="+obj.attr("gname")+" name="+obj.attr("gname")+">"+obj.attr("gname")+"<span class='delList'>×</span></li>"); } _this.allprice(); }, del: function(obj){ var _this = this; obj.find("input").removeAttr("checked"); obj.find("em").removeClass("on"); _this.chooselist.find("li[data-gid="+obj.attr("gid")+"]").remove(); _this.allprice(); }, allprice: function(){ var _this = this; var tmprice = 0; _this.chooselist.find("li").each(function(){ tmprice += parseFloat($(this).attr("data-price")); }); if(tmprice>0){ $("#chooseprice").html(_this.fixedNumber(tmprice)+"元").show(); $("#showmsg").hide(); } else{ $("#chooseprice").hide(); $("#showmsg").show(); } } } chooseAcc.init(); </script> </body> </html>
