這兩天在搞一個產品比較的選擇器功能，就像很多電商頁面上對兩個或者兩個以上的產品的一些屬性進行比較，從中挑選一個更適合我們的產品的這樣的一個玩意，效果圖如下：
當我們點擊紅叉或者清除所有品種的時候會將比較欄中的產品清除掉，當點擊對比所選品種時就會向後臺發送請求然後返回一些數據（一般都是所選產品共有的一些屬性）給我們，當點擊收起時這個比較欄就會縮小成如下形式：
這時候點擊展開的時候就會回到原來的樣子。
這個比較器使用了jquery的cookie插件是爲了能在瀏覽器瀏覽切換過程中不會將我們已選產品刪除。代碼中的cookie過期時間設置爲瀏覽器瀏覽期間，當關閉了瀏覽器之後我們的cookie就消失了。對於代碼中很多封殺掉的功能你們可以自己取消註釋進行測試。完整的可以運行的代碼在附件裏，包括css和圖片，其中有美工的功勞。下載下來解壓雙擊compartor.html即可。
關鍵代碼如下：
/*添加品種到比較欄*/
function AddProduct(productID, productName, imgSrc, link) {
var html = "";
html += '<li id="' + productID + '">';
html += '<a value="' + productID + '" class="removeProduct" ></a >';
//html += '<img src="' + imgSrc + '" class="thumbnail"/>';
html += '<a href="' + link.replace(".do",".do?") + '" title="查看品種詳情">' + productName + '</a>';
html += '</li>';
jQuery("#CompareProductList ul").prepend(html);
jQuery("a.removeProduct").each(function() {
jQuery(this).click(function() {
productCount--;
if (productCount < 0) {
productCount = 0;
}
jQuery("#ShowProductCount").text("品種總數:" + productCount);
var $product = jQuery("#" + jQuery(this).attr("value"), "#CompareProductList ul");
$product.slideUp("fast", function() { $product.remove()});
if (productCount == 0) {
jQuery("#CompareProductList").css("height", "");
jQuery("#CompareProductList ul").css("margin-top", "0px");
}
var oldProductID = $product.attr("id");
var oldProductName = jQuery("a", $product).not(".removeProduct").text();
var oldImgSrc = jQuery("img", $product).attr("src");
var oldLink = jQuery("a", $product).not(".removeProduct").attr("href");
RemoveProductFromCookie(oldProductID, oldProductName, oldImgSrc, oldLink);
SetControlButton();
if (productCount <= pageSize) {
jQuery("#CompareProductList ul").animate({
marginTop: 0
}, 'normal');
}
});
return false;
});
productCount++;
jQuery("#ShowProductCount").text("品種總數:" + productCount);
SetControlButton();
jQuery("#CompareBox").show("normal");
jQuery("#CompareHideBox").hide("fast");
checkHeight();
};