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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Javascript继承机制详解
May 30 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Vue简单实现原理详解
May 07 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
PHP count()函数讲解
2019/02/03 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
js Dialog 实践分享
2012/10/22 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python批量转换文件编码格式
2015/05/17 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
使用Python构造hive insert语句说明
2020/06/06 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
银行类自荐信
2014/02/04 职场文书
干部理论学习心得体会
2016/01/21 职场文书