bootstrap底部弹出产品对比

收藏

在天猫、京东等大型电商网站都会提供产品对比功能，用户只需勾选多个需要对比的产品，就可以进行比对。本文中的DEMPO使用jQuery+bootstrap来产品对比功能。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

产品列表，包括添加到对比框的按钮

<div class="col-md-3 col-xs-6 pro text-center">
    <div class="selectProduct" data-title="iPhone6" data-id="iPhone 6" data-size="4.7"" data-weight="129 g" data-os="iOS 8" data-processor="苹果A8+M8运动协处理器 1.4GHz(64位双核)" data-battery="1810mAH">
        <a class="btn-floating light-grey addButtonCircular addToCompare">+</a>
        <img src="images/iphone6.jpg" class="imgFill productImg">
        <h4>iPhone 6</h4>
    </div>
</div>
<div class="col-md-3 col-xs-6 pro text-center">
    <div class="selectProduct" data-title="iPhoneSE" data-id="iPhone SE" data-size="4.0"" data-weight="113 g" data-os="iOS 9" data-processor="苹果A9+M9运动协处理器 1.85GHz" data-battery="1624mAH">
        <a class="btn-floating light-grey addButtonCircular addToCompare">+</a>
        <img src="images/iphone_se.jpg" class="imgFill productImg">
        <h4>iPhone SE</h4>
    </div>
</div>

产品对比相关操作：

(function($) {
    var list = [];
    //添加到对比项
    $(document).on('click', '.addToCompare', function() {
        $(".comparePanle").show();
        $(this).toggleClass("rotateBtn");
        $(this).parents(".selectProduct").toggleClass("selected");
        var productID = $(this).parents('.selectProduct').attr('data-title');

        var inArray = $.inArray(productID, list);
        if (inArray < 0) {
            if (list.length > 2) {
                alert('最多只能选择3个产品');
                $(this).toggleClass("rotateBtn");
                $(this).parents(".selectProduct").toggleClass("selected");
                return;
            }

            if (list.length < 3) {
                list.push(productID);

                var displayTitle = $(this).parents('.selectProduct').attr('data-id');

                var image = $(this).siblings(".productImg").attr('src');

                $(".comparePan").append('<div id="' + productID + '" class="relPos col-md-3 text-center"><a class="selectedItemCloseBtn closebtn">×</a><img src="' + image + '" alt="image" style="height:100px;"/><p id="' + productID + '" class="ptitle">' + displayTitle + '</p></div>');
            }
        } else {
            list.splice($.inArray(productID, list), 1);
            var prod = productID.replace(" ", "");
            $('#' + prod).remove();
            hideComparePanel();

        }
        if (list.length > 1) {
            $(".cmprBtn").addClass("active");
            $(".cmprBtn").removeAttr('disabled');
        } else {
            $(".cmprBtn").removeClass("active");
            $(".cmprBtn").attr('disabled', '');
        }

    });

    //点击开始对比，弹出对比层
    $(document).on('click', '.cmprBtn', function() {
        if ($(".cmprBtn").hasClass("active")) {
            /* this is to print the  features list statically*/
            $(".contentPop").append('<div class="col-md-3 compareItemParent relPos">' + '<ul class="product"><li class=" relPos compHeader">产品信息</li><li>名称</li><li>屏幕大小</li><li>重量</li><li>系统</li><li class="cpu">CPU</li><li>电池容量</li></ul></div>');

            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 div*/
                $(".contentPop").append('<div class="col-md-3 compareItemParent relPos">' + '<ul class="product">' + '<li class="compHeader"><img src="' + image + '" class="compareThumb"></li>' + '<li>' + title + '</li>' + '<li>' + $(product).data('size') + '</li>' + '<li>' + $(product).data('weight') + '</li><li>' + $(product).data('os') + '</li><li class="cpu">' + $(product).data('processor') + '</li>' + '<li>' + $(product).data('battery') + '</ul>' + '</div>');
            }
        }
        $(".modPos").show();
    });

    //点击弹出层的关闭按钮
    $(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");
    });

    //删除对比项
    $(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();
        }
    }
})(jQuery);

PS:至少两件商品才可以对比哦。