bootstrap底部弹出产品对比

bootstrap底部弹出产品对比

添加时间:2020-12-25 01:59:23
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:购物车
  • 模板颜色模板颜色:中级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

在天猫、京东等大型电商网站都会提供产品对比功能,用户只需勾选多个需要对比的产品,就可以进行比对。本文中的DEMPO使用jQuery+bootstrap来产品对比功能。
bootstrap底部弹出产品对比
分类:其它特效 > 购物车 难易:中级

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

<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:至少两件商品才可以对比哦。

相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:bootstrap底部弹出产品对比

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.092302s