商品对比功能代码分享

前段时间，朋友叫我帮他写个商品对比功能，当时正好在逛绿森数码商城，点开商品列表，看到有商品对比功能，然后直接下载了他的JS滚动文件和抽出了对比框的样式，然后自己完善了下。

下面是小菜自己写的代码，写的不咋的，请老鸟不要见笑

示例页面：http://mt.kgula.com/product/

#p#

商品对比功能代码分享

商品对比调用的JS文件（包含了商品对比框浮动JS）：

/*浮动窗口*/ 
(function(){      
    var n=10;  
    var obj=document.getElementById("goods-compare");  
    if(!obj){  
        return false;  
    }  
    var x=0;  
    window.onscroll=function(){  
        obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';  
    };  
    window.onresize=function(){  
        obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';  
    };      
})();  
 
//添加显示对比框  
function addcompare(chk){  
    $('#goods-compare').fadeIn().show();  
    var count=$(".compare-box li").length;  
    if (count>2)//这里可以修改对比的数据哦  
    {  
        alert('产品比较最多选3种哦');  
        return;  
    }  
 
    $.ajax({  
        type: 'post',  
        url: 'ajax.php',  
        data: {  
            'action':'1',  
            'gid':chk.gid,//商品ID  
            'gname':chk.gname,//商品名称  
            'gtype':chk.gtype//商品类别，类别不同时不能比较  
        },  
        cache: false,  
        async: false,  
        success: function(result) {  
            if(result!='')  
            {  
                alert(result);  
            }else{  
                var url='http://www.lusen.com/product-'+chk.gid+'.html';//设置商品的链接地址  
                $(".compare-box").append("<li class='division clearfix' id='"+chk.gid+"'><div class='span-3'><a href='"+url+"' target='_blank' title='"+chk.gname+"'>'"+chk.gname+"'</a></div><span onclick=\"removecompare('"+chk.gid+"');\">删除</span></li>")  
                $("#comids").val($(".compare-box li").map(function(){//将对比的所有商品ID，赋值给#comids  
                    return $(this).attr('id');  
                }).get().join(","));  
            }  
        }  
    });  
}  
 
//删除对比产品  
function removecompare(id)  
{  
    $.ajax({  
        type: 'post',  
        url: 'ajax.php',  
        data: {  
            'action':'2',  
            'gid':id  
        },  
        cache: false,  
        success: function(result) {  
            $("#"+id).remove();  
            $("#comids").val($(".compare-box li").map(function(){  
                return $(this).attr('id');  
            }).get().join(","));  
        }  
    });  
    
}  
//清空对比产品  
function clearcompare()  
{      
    $.ajax({  
        type: 'post',  
        url: 'ajax.php',  
        data: {  
            'action':'3' 
        },  
        cache: false,  
        success: function(result) {  
            $(".compare-box").html('');  
            $("#comids").val('');  
        }  
    });  
}  
//显示对比框  
function showcompare()  
{  
    $.ajax({  
        type: 'post',  
        url: 'ajax.php',  
        data: {  
            'action':'4' 
        },  
        success: function(result) {  
            if(result){  
                $(".compare-box").append(result);  
                $("#comids").val($(".compare-box li").map(function(){  
                    return $(this).attr('id');  
                }).get().join(","));  
                $('#goods-compare').fadeIn().show();  
            }  
        }  
    });  
    
}  
 
//点击关闭对比框  
$('.close-gc').click(function(){  
    $('#goods-compare').fadeOut().hide();  
}); 

商品对比调用Ajax文件

<?php  
function mb_unserialize($serial_str) {  
    $serial_str =stripslashes($serial_str);  
    return unserialize($serial_str);  
}  
if($_POST['action']=='1') {//add  
    if(isset($_COOKIE['gtype'])) {  
        if($_COOKIE['gtype']!=$_POST['gtype']) {  
            echo '对不起，您选择的是不同类别的产品无法加入对比，请选择同类产品或清空当前对比栏再选择。';  
            return;  
        }  
    }else {  
        setcookie('gtype',$_POST['gtype']);  
    }  
    if(isset($_COOKIE['gid'])) {  
        $arr_str = $_COOKIE['gid'];  
        $arr=mb_unserialize($arr_str);  
        if(count($arr)>2) {//商品比较数量  
            echo "商品比较最多选3种";  
            return;  
        }  
        foreach($arr as $val) {  
            if($val[0]==$_POST['gid']) {  
                echo "该商品已经加入对比框";  
                return;  
            }  
        }  
        $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);  
        $arr[]=$info;  
        $arr_str=serialize($arr);  
        setcookie('gid',$arr_str);  
    }else {  
        $info=array($_POST['gid'],$_POST['gname'],$_POST['gtype']);  
        $arr[]=$info;  
        $arr_str=serialize($arr);  
        setcookie('gid',$arr_str);  
    }  
}else if($_POST['action']=='2') {//delone  
    $id=$_POST['gid'];  
    $arr_str = $_COOKIE['gid'];  
    $arr=mb_unserialize($arr_str);     
    foreach($arr as $key=>$val) {  
        if($val[0]==$id) {  
            unset ($arr[$key]);  
        }  
    }  
    $arr_str=serialize($arr);      
    setcookie('gid',$arr_str);  
}else if($_POST['action']=='3') {//delall  
    setcookie('gid','');  
    setcookie('gtype','');  
}else if($_POST['action']=='4') {//showlist  
    if(isset($_COOKIE['gid'])) {  
        $data='';  
        $arr_str = $_COOKIE['gid'];  
        $arr=mb_unserialize($arr_str);   
        foreach ($arr as $val){            
            $url="http://www.lusen.com/product-".$val[0].".html";  
            $data.="<li id='{$val[0]}' class='division clearfix'><div class='span-3'><a href='{$url}' target='_blank' title='{$val[1]}'>{$val[1]}</a></div><span onclick=\"removecompare('{$val[0]}');\">删除</span></li>";  
        }  
        echo $data;  
    }      
}  
?> 

原文链接：http://blog.kgula.com/compare/#hacklog_download_list6