Communicate and match data with the backend (light up the stars), and the backend light up

Communicate and match data with the backend (light up the stars), and the backend light up

1. In the project, I met the product evaluation page, which contains the product star rating. At that time, I only wrote out the results (that is, the user clicked a few stars to see a few stars ),

When I handed over the page to my back-end colleagues, he said that it was meaningless for me to do so and he could not do it. At that time, my mind was a bit confused.

Later, my back-end colleague said that he was here. As a young man in the 21 st century, how can he help him complete all his tasks ~

Through some advice from my colleagues and my own exploration, I finally understood the relationship here. Here I will explain through my own words how to write this program and what operations should I perform.

 

A, first:

 

B: In the picture above, I think one is five bright ones and the other is four bright ones. What makes it like this? See:

Yes, that's right. The starting number of stars is because of data.

 

 

C: Now I can talk about this data. But what is this data?

It turns out that the frontend and backend agreed to store the data (any name tada and tdat can be used for it), and the backend can assign values to it, if data is equal to the value, the stars are displayed. But why is this data required?

 

It is a sauce purple: when user a clicks the stars, it is to give user B user c user d... so the number of stars clicked by the user must be stored (assigned value) somewhere (that is, data) for the background to get

That is, the frontend value assignment and the backend value, and the backend stores the obtained data in the database and then assigns the value to the data to display the number of stars that user a has commented on.

Frontend value assignment ----- backend value -- backend data storage -- backend data is fed back to the front end based on the stored data -- the front end displays the corresponding results on the page based on the data feedback from the backend

 

 

Well, you can write the program after the logic is clear:

$ ('. Evaluate_mark '). each (function () {var star = $ (this ). find ('. u-grade '). attr ('data'); // get data. One is 5 and the other is 4/* alert (star) */$ (this ). find ('. u-grade div '). removeClass ('light'); // remove light from all classes $ (this ). find ('. u-grade div '). each (function (I, ele) {// current element of ele. if (I <star) {/* alert (I ); * // * alert (ele); */$ (ele ). addClass ('light ');}});});

The above code is relatively simple. First, traverse and findThe div under. u-grade, that is, the u-grada_item,

After finding it, remove all its light (light is the class that lights the stars in css), and thenU-grada_itemFor traversal, star has obtained the data value and is determined based on I <star

In this way, the number of stars is displayed, that is, the first figure above shows a bright five stars and a bright four stars.

 

4.1: now we have completed the backend assignment and the frontend performance. At this time, the difference is two,

One is the effect of user clicks, and the other is to assign the value of the user clicking the current star to data (for the backend value to be saved and re-assigned to display)

 

4.2: The following figure shows the user click performance.

$ (Function () {$. setGrade = function ($ ele, index) {var $ item = $ ele. find (". u-grade_item "); $ item. removeClass ("light"); $ item. slice (0, index + 1 ). addClass ("light");/* alert (index + 1); */}; (function () {var $ item = $ (". u-grade. u-grade_item "); $ item. click (function (){
Var $ this = $ (this);/* defines a variable to save the current $ item object */var index = $ this. parent (". u-grade "). children (". u-grade_item "). index ($ this); // return the index position of the specified Element Through index (), that is, the index value of the current element you think/* alert (index ); */$. setGrade ($ this. parent (), index); // static method under jQuery })})();});

 

 

A: The code implementation is different. You can view the comments. In this way, the user clicks to generate the effect. The last one is missing, assign the value of the star you click to data,

It is easy to clarify this:

 

(Function () {var $ item = $ (". u-grade. u-grade_item "); $ item. click (function () {var $ this = $ (this); var index = $ this. parent (". u-grade "). children (". u-grade_item "). index ($ this); var star = $ (this ). parent (". u-grade "). attr ('data', index + 1); // assign the index of the clicked element to data to change the original data value $. setGrade ($ this. parent (), index); // static method under jQuery })})();

 

 

Conclusion: Now the requirement has been fulfilled.

If any error occurs, please correct it.