jquery to achieve product contrast function with source download _jquery

Product comparison I believe that we are not unfamiliar, in order to facilitate the user of similar products related information for effective intuitive comparison, some of the electrical business site products or evaluation site will provide users with product comparison of the function, users need to tick a number of needs compared to the product, you can conduct comparison. This article will use jquery to show you how to implement the product comparison function.

View Demo Download source code

Html

HTML structure we divided into three parts, the first is the Product List section, showing all the products can be compared. We take a mobile site for example, simple structure, just show the product picture and name, as well as a add button. Note that we put the relevant parameters of the cell phone information in the attribute data-*, and so on later to show the contrast information will be used.

<div class= "Selectproduct" data-title= "Huawei P9" data-id= "Huawei P9" data-size= "5.2" "data-weight=" 144 g "data-os=" Android 6.0 "data-processor=" HiSilicon kylin 955 2.5GHz (8 nuclear) "data-battery=" 3000mAH "> 
<a class=" Btn-floating Light-grey Addbuttoncircular addtocompare ">+</a>  
 
 

The second part of the comparison preview box is that we select the products that need to be compared to add to the match preview box. We use CSS control defaults do not show, when a product is added, at the bottom of a fixed page to display the preview box.

<div class= "Row" > 
<div class= "col-md-12 comparepanle" > 
<div class= "Row" > 
<div class= "col-md-9" > 
 
 

The third part is the detailed information pop-up layer. The default is not displayed, when the click of the comparison box in the beginning of the button, will pop up a detailed information layer, in the form of a list of the selected products in detail.

<div id= "id01" class= "Animate-zoom modal ModPOS" > 
<div class= "Modal-title" > 
<a onclick= " document.getElementById (' id01 '). style.display= ' None ' "class=" modal-closebtn ">x</a> 
</div> 
<div class= "Row Contentpop" ></div> 
</div>

CSS files are packaged in the source code, not listed here, please download the source view.

Jquery

This example is based on jquery, so you should load the jquery library files before you write the JS code.

First, when you click the "+" number in the upper-right corner of the product display, the current product is added to the alignment box at the bottom of the page. The business process is this: after clicking on the "+" number, displays the alignment box, the "+" number of the current product display becomes an "x" Number, and is selected, gets the ID of the current product, determines whether the current product ID is in the alignment box, and if it is not in the alignment box, adds the product to the alignment box. If there are more than 3 products in the box, the Prompt box pops up. If the current product already exists in the alignment box, then the actual click is "X" and the current product is removed from the comparison box. Another detail is that when there is only one product in the alignment box, you cannot do the alignment, so the disabled button in the box is not available.

var list = []; 
Add to contrast $ (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 (' up to 3 products only selected '); 
$ (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 ">x</a><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 ', '); } 
});

Then came to the operation of the box, the product added to the comparison box, click the "Start" button, pop-up layer, get the product information, and add product information to the pop-up layer. Here, we use jquery's $ (EL). Data () method to obtain the data-* attribute content in the products in front of the HTML.

$ (document). On (' click ', '. Cmprbtn ', function () {if ($ (". Cmprbtn"). Hasclass ("active")) {/* is to print the Featu Res list statically*/$ (". Contentpop"). Append (' <div class= ' col-md-3 compareitemparent relpos ' > ' + ' <ul class= ') Product "><li class=" Relpos compheader "> Product information </li><li> name </li><li> screen size </li> <li> weight </li><li> system </li><li class= "CPU" >CPU</li><li> battery capacity </li>< 
/ul></div> '); for (var i = 0; i < list.length i++) {/* is to add the items to popup which are selected for comparision/PR 
Oduct = $ ('. 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 ' ></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 (); });

Then, the product information is displayed, clicking on the "X" in the upper-right corner closes the pop-up layer and clears the contents of the Alignment box.

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

Finally, we can also remove the matching product in the Alignment box, click on the "X" number in the product box to remove the corresponding product.

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

The above is a small series to introduce the jquery product comparison function with the source download, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!