Analysis of ultra-simple thumb ups implemented by jQuery _ jquery

This article mainly introduces the ultra-simple likes implemented by jQuery, and analyzes the specific steps and related skills for implementing the likes feature by using examples, for more information about jQuery, see the following example:

1. HTML (you can optimize it and try to reduce the number of tags .....)

  1Awesome  2Recommendation  3Average  6Bored  5Raytheon

2.css Style

#dianz{text-align:center; width:610px; overflow:hidden;zoom:1; margin:20px auto;}#dianz b{ display:inline-block; width:120px; height:215px; float:left; position:relative;}#dianz b em,#dianz b u,#dianz b i,#dianz b s{display:inline-block; width:100%; height:20px; position:absolute; left:0px;}#dianz b u{ bottom:0px;}#dianz b s{ bottom:20px; height:95px;}#dianz b i{width:20px; height:80px;left:50px; bottom:115px;}#dianz b.cz s{ background:url(../images/dianz.jpg) 25px 0px no-repeat}#dianz b.cz i{ background-color:#fe0032;}#dianz b.tj s{ background:url(../images/dianz.jpg) -105px 0px no-repeat}#dianz b.tj i{ background-color:#fe9903;}#dianz b.yb s{ background:url(../images/dianz.jpg) -235px 0px no-repeat}#dianz b.yb i{ background-color:#99c900;}#dianz b.wl s{ background:url(../images/dianz.jpg) -370px 0px no-repeat}#dianz b.wl i{ background-color:#32ccff;}#dianz b.lj s{ background:url(../images/dianz.jpg) -500px 0px no-repeat}#dianz b.lj i{ background-color:#3167ff;}

3. js)

Function o_dianz () {var oi = $ ('# dianz B I'); // obtain I; oem = $ ('# dianz B em'); // obtain em; OS = $ ('# dianz B s'); // obtain s; bl = null; osz = null; Arr = []; Arr2 = []; function o_mm () {oem. each (function () {osz = $ (this ). text (); Arr. push (osz); // console. log (Arr)}); var get_max = Math. max. apply (null, Arr); // obtain the maximum number of likes; bl = 80/get_max; oem. each (function () {osz = $ (this ). text (); var oi_H = Math. floor (osz * bl); Arr2.push (oi_H) ;}); for (var I = 0; I
All right, the code is pasted. It's super simple. I wrote the principle (I don't know if there is a better one, and the bug is not detected): Set the default height of the I tag to 80 PX, and then use js to find the text value of each em, drop the array Arr and use Math. max. apply (null, Arr), calculate the maximum text value, and then obtain the scale (the maximum text can ensure that the height is not greater than 80 Px), and multiply the value of each text by the scale Math. floor (osz * bl), and obtain the height value of each em.

Each time you click an icon in the next click event, You can reset Arr and Arr2 to ensure that the values are updated in real time... OK, it's all done here,
Final result:
I hope this article will help you with jQuery programming.