商品編輯
描述：主要是根據選中事件選中或取消，編輯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：
效果如下圖：
商品編輯續例子：
<!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">
<p><a>商品2</a></p>
<em></em> 30元
<input type="hidden" name="name2" />
<li gid="1003" gname="商品3" price="9.9">
<p><a>商品3</a></p>
<em></em> 9.9元
<input type="hidden" name="name3" />
<li gid="1004" gname="商品4" price="99.9">
<p><a>商品4</a></p>
<em></em> 99.9元
<input type="hidden" name="name4" />
<li gid="1005" gname="商品5" price="200">
<p><a>商品5</a></p>
<em></em> 200元
<input type="hidden" name="name5" />
<li gid="1006" gname="商品6" price="88">
<p><a>商品6</a></p>
<em></em> 88元
<input type="hidden" name="name6" />
</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>
<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(){
_this.checkboxAction();
_this.listsAction();
checkboxAction: function(){
_this.accradio.find("li").click(function(){
var $this = $(this);
if($(this).find("input").attr("checked")){
_this.del($this);
} else{
_this.add($this);
}
});
listsAction: function(){
_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){
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>");
_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){
obj.find("input").removeAttr("checked");
obj.find("em").removeClass("on");
_this.chooselist.find("li[data-gid="+obj.attr("gid")+"]").remove();
allprice: function(){
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();
$("#chooseprice").hide();
$("#showmsg").show();
chooseAcc.init();
</script>
</body>
</html>
運作代碼