Kaibo's first article: record the "change one" function implemented by the front-end.

Kaibo's first article: record the "change one" function implemented by the front-end.

Simple requirements: implement the "change one" button function, click it, and change to another batch of corresponding brands

 

At the beginning, we considered Using ajax to request data, and then filling in the specified location on the page through js. However, I am too lazy to configure a request ing for this ajax request separately, simply splice all the required content into a JSON string in the background and parse it directly at the front-end for paging.

The page is relatively simple, so the html code will not be available. The general idea is: the two "change one" Buttons correspond to two sets of data respectively, share one paging method, and pass in their respective pages, displays the content of the corresponding page number. Of course, there are a variety of ways to achieve "change one". Here I just want to record my own ideas, and I welcome criticism and suggestions, Pat bricks, and take good care of new people. 3Q.

Save your saliva and go directly to the Code ~

1 $ (function () {2 3 // "change one" function home, Groceries click Counter 4 var jiajubrandCount = 0; 5 var zahuobrandCount = 0; 6 7 // initialize the home brand content 8 jiajubrandCount = ClickToChangeBrand ("jiajubrand", "jiajubrandval", jiajubrandCount); 9 // initialize the grocery brand content 10 zahuobrandCount = ClickToChangeBrand ("zahuobrand ", "zahuobrandval", zahuobrandCount); 11 12 // for a home change click 13 $ ("# jiajuBrandChange "). click (function () {14 jiajubrandCount = ClickToChangeBrand ("jiajubr And "," jiajubrandval ", jiajubrandCount); 15}); 16 17 // for groceries, click 18 $ (" # zahuoBrandChange "). click (function () {19 zahuobrandCount = ClickToChangeBrand ("zahuobrand", "zahuobrandval", zahuobrandCount); 20 }); 21 22 // brand "change one" function 23 // container: target container 24 // valSrc: container where values are stored 25 // brandCount: Count 26 function ClickToChangeBrand (container, valSrc, brandCount) {27 28 // $ ("#" + container ). empty (); // clear the existing content 29 var s = $ ("#" + valSrc ). val (); // Obtain all brand data 30 var obj = $. parseJSON (s. toString (); // convert to JSON31 var totalCount = obj. length; // The total number of records 32 var perPageCount = 20; // The number of pre-viewed records per page 33 var pageCount = 0; // the total number of pages 34 var actualPerPageCount = 0; // The actual number of displays per page 35 var strTotal = ""; // buffer variable 36 37 var tempRs = totalCount % perPageCount; // calculate the total number of pages 38 if (tempRs! = 0) {39 pageCount = parseInt (totalCount/perPageCount) + 1; 40} 41 else {42 pageCount = parseInt (totalCount/perPageCount ); 43} 44 45 // obtain the actual number of records to be displayed each time. if the last page contains less than 46 if (brandCount * perPageCount + perPageCount> totalCount) {47 actualPerPageCount = totalCount-brandCount * perPageCount; 48} 49 else {50 actualPerPageCount = perPageCount; 51} 52 53/* alert ("counter:" + brandCount ); 54 alert ("actual number of pages:" + actualPerPageCount); 55 alert ("predetermined number of pages:" + perPageCount); 56 alert ("Total number of pages:" + pageCount ); */57 58 // get the content of the current page 59 for (I = brandCount * perPageCount; I <brandCount * perPageCount + actualPerPageCount; I ++) {60 // obj [I]. title is the title, obj [I]. name is the category id61 strTotal + = "<a href = ''target = '_ blank'>" + obj [I]. title + "</a>"; 62} 63 64 // when the counter is greater than or equal to the number of pages, the system returns to 65 brandCount ++; 66 if (brandCount> = pageCount) {67 brandCount = 0; 68} 69 70 // fade out 71 $ ("#" + container ). empty (). append (strTotal ). hide (). stop (true, true ). fadeIn ("slow"); 72 73 return brandCount; 74} 75 });