1. I encountered the product evaluation page in the project, which contained the star evaluation of the product. At that time, I just wrote down the effect (that is, the user clicked on a few stars to show a few bright ones).
When I made the page and handed it over to my backend colleague, he said it was meaningless for me to do this and he couldn't do it. At that time, my mind was a little confused.
Later, my colleague at the backend said that he would make trouble. As a sunny young man in the 21st century, how could he let his colleagues help him complete his tasks?
Through my colleagues’ advice and my own exploration, I finally understood the relationship here. Now I will explain how to write this program and what operations should be done through my own words.
a, the picture is above:
b: The above picture reviewed one of the 5 lights and the other 4 lights. What makes it like this? See the picture below:
Yes, yes, the number of lighted stars in the starting star is because of data
c: Now we can talk about this data, but what is this data?
It turns out that the front-end and back-end agreed to where data is stored (you can give it any name tada or tdat). The back-end can assign values to it, and the data equals as many stars as it is. But why do you need this data?
It's Jiang Zi: When user a clicks on the star, it can be viewed to user b user c user d..., so the number of stars clicked by the user must be stored (assigned) in a certain place (that is, data) so that the background can get it.
That is, the front-end assigns values, the back-end takes values, and the back-end stores the obtained data in the database and then reassigns it to data to display the number of positive stars that user a has evaluated.
Front-end assignment------》Back-end value--》Back-end storage data--》Back-end feedback to the front-end based on the stored data--》The front-end displays corresponding effects on the page based on the data feedback from the back--》
OK, if you understand the logic, you can write the program:
$('.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 all class light$(this).find('.u-grade div').each(function(i,ele){ //ele's current element, the index of i current element if(i<star){ /*alert(i); */ /*alert(ele); */ $(ele).addClass('light'); }});});The above code is relatively simple. First, iterate and find the div below.u-grade, that is, u-grada_item,
After finding it, remove all its lights (light is the class that lights up the stars in css), and then traverse the u-grada_item. Star has obtained the data value and judged based on i<star.
This shows the number of stars' brightness, that is, the first picture above is bright, one is bright, one is bright, one is bright, one is bright, and one is bright, and the other is bright, and the other is bright, and the other is bright, and the other is bright, and the other is bright, and the number is bright, and the number is bright, and the number is bright.
4.1: At this point, we have completed the back-end assignment and the front-end performance effect. There are still two pieces left at this time.
One is the part where the user clicks to produce the effect, and the other is to assign the value of the user clicks on the current star on the data (let the backend save the value and reassign the value and display it)
4.2: Let’s do the following to show the effect of user clicks
$(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); /*Define 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(), which is what you think is the index value of the current element/*alert(index); */ $.setGrade($this.parent(),index); // Static method under jQuery})})();});a: I won’t talk about the code implementation one by one. You can read the comments. In this way, the user clicks to produce the effect. There is only the last one below. Assign the value of the star clicked by the user to data.
It's easy to make it clear:
(function(){var $item = $(".u-grade .u-grade_item"); $item.click(function(){var $this = $(this); var index = $this.parent(".u-grade_item").index($this); var star = $(this).parent(".u-grade").attr('data',index+1);// Assign the index of the current element to data to change the original data value $.setGrade($this.parent(),index); // Static method under jQuery})})();Okay, the entire content of this article has been introduced. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!