jQuery通过源代码下载实现产品对比功能

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

查看演示下载源代码

超文本标记语言

HTML结构分为三个部分。第一部分是产品列表，显示了所有可以比较的产品。我们以一个手机网站为例。它结构简单，只需要显示产品图片和名称，还有一个添加按钮。注意，我们把手机的所有相关参数信息都放在属性数据-*中，稍后显示对比信息时会用到。

div class=' select product ' data-title=' Huawei P9 ' data-id=' Huawei P9 ' data-size=' 5.2 ' ' data-weight=' 144g ' data-OS=' Android 6.0 ' data-processor=' his licon 955 2.5 GHz(8核)' data-battery=' 3000 mah ' a class=' BTN-浮动浅灰色addButtonCircular addto compare '/a img src=' http 3360 images/Huawei _ p9 . jpg ' class我们使用CSS来控制默认显示。添加产品时，比较预览框显示在固定页面的底部。

Div class=' row ' Div class=' col-MD-12 compare pane ' Div class=' row ' Div class=' col-MD-9 '比较中的h4产品/H4/Div Div class=' col-MD-3 ' button class=' btnbtn-default cmprbtn '禁用开始比较/button/Div/Div class=' compare pan '/Div/Div第三部分是详细比较信息的弹出层。默认情况下不显示。当您点击比较框中的开始比较按钮时，将弹出一个详细的信息层，所选产品将以列表的形式进行详细的比较。

div id=' id01 ' class=' animate-zoom modPos ' div class=' modal-title ' a onclick=' document . getelementbyid(' id01 ')。style . display=' none ' ' class=' modal-closebtn '/a/div div class=' row content top '/div/div CSS文件打包在源代码中，此处未列出。请下载源代码自己查看。

jQuery

这个例子是基于jQuery的，所以应该在编写js代码之前加载jQuery库文件。

首先，当您点击产品显示右上角的" "时，当前产品将被添加到页面底部的比较框中。业务流程如下：点击“”后，显示比较框，当前产品显示的“”变为“X”，选中。获取当前产品的id，判断当前产品id是否在比较框中。如果不在比较框中，请将产品添加到比较框中。如果比较框中有3个以上的产品，会弹出提示框。如果比较框中已经存在当前产品，此时实际点击“X”，当前产品将从比较框中删除。另一个细节是，当比较框中只有一个产品时，无法进行比较，因此比较框中的“开始比较”按钮被禁用。

定义变量列表=[];//添加到对比项$(文档)。打开('点击','。'' addToCompare '，函数(){ $('。comparePanle ').show()；$(这个)。切换类(' Rotatebtn ')；$(这个)。父母('。选择产品')。toggleClass('选定');var productID=$(this).父母('。选择产品')。attr('数据标题');var inArray=$ .inArray(productID，列表);if(InRay 0){ if(list。长度2){ alert('最多只能选择3个产品');$(这个)。切换类(' Rotatebtn ')；$(这个)。父母('。选择产品')。toggleClass('选定');返回；} if(列表。长度3){列表。push(ProducT id)；var displayTitle=$(this).父母('。选择产品')。attr(' data-id ')；var image=$(this).兄弟姐妹('。productImg ').attr(' src ')；$('.比较pan’).追加(' div id=' ProductID ' ' class=' RelPoS col-MD-3 text-center ' a class=' selecteditemcloseBtn closeBtn ' times/aimg src=' http : ' image ' ' alt=' image ' style=' height :100 px；/p id=' ProducT id ' ' class=' pt title ' ' display title '/p/div ')；} } else { list.splice($ .inArray(productID，列表),1);var prod=productID.replace(“”、“”)；$("#"产品)。移除();hidcorepanel()；} if (list.length 1) { $(' .cmprBtn’).添加CLaSS(' active ')；$('.cmprBtn’).移除attr(' disabled ')；} else { $(' .cmprBtn’).移除CLaSS(' active ')；$('.cmprBtn’).attr('disabled '，' ')；} });接下来到了比对框的操作了，产品加到比对框后，点击"开始比对"按钮，弹出层，获取比对的产品信息，并将产品信息加入到弹出层中。这里，我们使用了jQUery的$(萨尔瓦多).数据()方法获取了前面超文本标记语言中产品中的数据-*属性内容。

$(文档)。打开('点击','。cmprBtn '，函数(){ if ($(').cmprBtn’).有类(' active '){/*这是静态打印功能列表*/$()。内容PoP’).追加(' div class=' col-MD-3 comparatiometeparent RelPoS ' ' ' ul class=' product ' Li class=' RelPoS compHeader '产品信息/莉莉名称/莉莉屏幕大小/莉莉重量/莉莉系统/lili class='cpu'CPU/lili电池容量/Li/ul/div '；for(var I=0；一、清单。长度；i ) { /*这是将选择用于比较的项目添加到弹出窗口*/product=$(' .选择产品[数据-标题='列表[I]' ']')；var image=$('[data-title=' list[I]']').查找('。productImg ').attr(' src ')；var title=$('[data-title=' list[I]']').attr(' data-id ')；/*追加到div*/$(' .内容PoP’).追加(' div class=' col-MD-3 comparatitem parent RelPoS ' ' ' ul class=' product ' ' ' Li class=' CompHeader ' img src=' http 3360 ' image ' ' class=' comparatitethumb '/Li ' ' Li ' title '/Li ' ' Li ' $(产品).数据('大小)/li' 'li' $(产品)。数据('重量)'/lili' $(产品)。数据(“OS”)”/Lili class=“CPU”$(产品)。数据('处理器)/li' 'li' $(产品)。数据('电池)'/ul ' '/div ')；} } $('.ModPoS’).show()；});然后，产品信息展示出来了，点击右上角的“x”号，会关闭弹出层，并且清除比对框中的内容。

$(文档)。打开('点击','。modal-closebtn '，function () { $(' .内容PoP’).empty()；$('.比较pan’).empty()；$('.comparePanle ').hide()；$('.ModPoS’).hide()；$('.选择产品')。removeClass(“”选定');$('.cmprBtn’).attr('disabled '，' ')；名单。长度=0；$('.rotateBtn ').切换类(' Rotatebtn ')；});最后，我们在比对框中也可以移除比对的产品，点击比对产品框中的“x”号，会移除对应的产品。

$(文档)。打开('点击','。selectedItemCloseBtn '，function () { var test=$(this).兄弟姐妹(' p ').attr(' id ')；$('[data-title=' test ']').查找('。addToCompare ').单击();hidcorepanel()；});函数hidcorepanel(){ if(！list.length) { $(' .比较pan’).empty()；$('.comparePanle ').hide()；} }以上所述是小编给大家介绍的jQuery实现产品对比功能附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！