jQuery实现产品对比功能附源码下载


Posted in Javascript onAugust 09, 2016

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

jQuery实现产品对比功能附源码下载

查看演示     下载源码

HTML

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

<div class="selectProduct" data-title="华为P9" data-id="华为P9" data-size="5.2"" data-weight="144 g" data-os="Android 6.0" data-processor="海思麒麟955 2.5GHz(8核)" data-battery="3000mAH"> 
<a class="btn-floating light-grey addButtonCircular addToCompare">+</a> 
<img src="images/huawei_p9.jpg" class="imgFill productImg"> 
<h4>华为 P9</h4> 
</div>

第二部分是比对预览框,我们选择了需要对比的产品都会加入到比对预览框中。我们使用CSS控制默认不显示,当有产品被加入时,在固定的页面的底部显示比对预览框。

<div class="row"> 
<div class="col-md-12 comparePanle"> 
<div class="row"> 
<div class="col-md-9"> 
<h4>对比中的产品</h4> 
</div> 
<div class="col-md-3"> 
<button class="btn btn-default cmprBtn" disabled>开始对比</button> 
</div> 
</div> 
<div class="comparePan"></div> 
</div> 
</div>

第三部分就是详细的比对信息弹出层。默认是不显示的,当点击比对框中的开始比对按钮,会弹出一个详细信息层,以列表的形式将所选的产品进行详细比对。

<div id="id01" class="animate-zoom modal modPos"> 
<div class="modal-title"> 
<a onclick="document.getElementById('id01').style.display='none'" class="modal-closebtn">×</a> 
</div> 
<div class="row contentPop"></div> 
</div>

Css文件在源码中打包好,这里不列出来了,请自行下载源码查看。

jQuery

本示例是基于jQuery的,所以在写js代码前应该先将jQuery库文件加载好。

首先,当点击产品展示的右上角的“+”号,则会将当前产品添加到位于页面底部的比对框中。业务流程是这样的:点击“+”号后,显示比对框,当前产品展示的“+”号变成“x”号,并且处于选中状态,获取当前产品的id,判断当前产品id是否在比对框中,如果不在比对框中,则将产品加入到比对框中,如果这时比对框中的产品超过了3个,则弹出提示框。如果比对框中已经存在当前产品,那么这个时候实际点击的是“x”号,当前产品会从比对框中删除。还有一个细节就是,当比对框中只有一个产品时,不能做比对,所以比对框中的“开始比对”按钮是不可用的disabled。

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', ''); 
} 
});

接下来到了比对框的操作了,产品加到比对框后,点击“开始比对”按钮,弹出层,获取比对的产品信息,并将产品信息加入到弹出层中。这里,我们使用了jQUery的$(el).data()方法获取了前面html中产品中的data-*属性内容。

$(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(); 
});

然后,产品信息展示出来了,点击右上角的“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(); 
} 
}

以上所述是小编给大家介绍的jQuery实现产品对比功能附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
JavaScript实现音乐导航效果
Nov 19 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 #Javascript
JavaScript实现广告弹窗效果
Aug 09 #Javascript
谈谈JavaScript中的几种借用方法
Aug 09 #Javascript
Backbone View 之间通信的三种方式
Aug 09 #Javascript
Backbone中View之间传值的学习心得
Aug 09 #Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 #Javascript
jQuery 生成svg矢量二维码
Aug 09 #Javascript
You might like
桌面中心(二)数据库写入
2006/10/09 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
浅析php创建者模式
2014/11/25 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python实战教程之自动扫雷
2018/07/13 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
python getpass模块用法及实例详解
2019/10/07 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python 连续不等式语法糖实例
2020/04/15 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
党员评议自我评价
2015/03/03 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Django中session进行权限管理的使用
2021/07/09 Python