产品对比相信大家并不陌生，为了方便用户对类似产品的相关信息进行有效直观的对比，一些电商网站产品或评测网站会为用户提供产品对比的功能，用户只需勾选多个需要对比的产品，就可以进行比对。本文将使用jQuery来给大家讲解如何实现产品对比功能。

HTML

HTML结构我们分三部分，第一是产品列表部分，展示所有可以对比的产品。我们以某手机网站为例，简单的结构，只需展示产品图片和名称，以及一个添加按钮。注意我们把手机的相关参数信息都放在属性data-*里，等会后面展示对比信息的时候会用到。

$(document).on('click', '.cmprBtn', function () {
        if ($(".cmprBtn").hasClass("active")) {
            /* this is to print the  features list statically*/
            $(".contentPop").append('' + '产品信息
名称
屏幕大小
重量
系统
CPU
电池容量
');

            for (var i = 0; i < list.length; i++) {
                /* this is to add the items to popup which are selected for comparision */
                product = $('.selectProduct[data-title="' + list[i] + '"]');
                var image = $('[data-title=' + list[i] + ']').find(".productImg").attr('src');
                var title = $('[data-title=' + list[i] + ']').attr('data-id');
                /*appending to p*/
                $(".contentPop").append('' + '' + '' + '
' + title + '
' + '
' + $(product).data('size') + '
' + '
' + $(product).data('weight') + '
'+ $(product).data('os') +'
' + $(product).data('processor') + '' + '
' + $(product).data('battery') + '' + '
');
            }
        }
        $(".modPos").show();
    });
然后，产品信息展示出来了，点击右上角的“x”号，会关闭弹出层，并且清除比对框中的内容。
$(document).on('click', '.modal-closebtn', function () {
        $(".contentPop").empty();
        $(".comparePan").empty();
        $(".comparePanle").hide();
        $(".modPos").hide();
        $(".selectProduct").removeClass("selected");
        $(".cmprBtn").attr('disabled', '');
        list.length = 0;
        $(".rotateBtn").toggleClass("rotateBtn");
    });
最后，我们在比对框中也可以移除比对的产品，点击比对产品框中的“x“号，会移除对应的产品。
$(document).on('click', '.selectedItemCloseBtn', function () {
        var test = $(this).siblings("p").attr('id');
        $('[data-title=' + test + ']').find(".addToCompare").click();
        hideComparePanel();
    });
    function hideComparePanel() {
        if (!list.length) {
            $(".comparePan").empty();
            $(".comparePanle").hide();
        }
    }