Home > Web Front-end > JS Tutorial > jQuery implements special effects of review ratings, good reviews and bad reviews_jquery

jQuery implements special effects of review ratings, good reviews and bad reviews_jquery

WBOY
Release: 2016-05-16 15:01:50
Original
1784 people have browsed it

The implementation of rating levels is similar to Taobao's special effects of good reviews and negative reviews. Click on different level icons to display the corresponding text. Let's take a look at the effect first.

jQuery implements special effects of review ratings, good reviews and bad reviews_jquery

After seeing the effect, I think everyone understands what I am going to say. Now I will show you the code

Copy code The code is as follows:


Copy code The code is as follows:


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     






Finally, let’s take a look at the JS. The editor has noted all the comments above. It’s actually not difficult. The main thing is to deepen our understanding..

Copy code

The code is as follows: $(function(){ $(".maxdiv div").bind("hover",function(){            $(this).attr("style","background:red");//Add style="background:red" to the current div;
          $("div:last").prevAll().attr("style","background:red");//Add styles to everything;
            $(this).nextAll().attr("style","");//All styles after the current div are "";
        var dsize=$("div [style ='background:red']").size();//Get the number of all backgrounds containing style="background:red";
If(dsize==1)
            {
          $('span').text("Very bad");
}
          else if(dsize==2)
            {
          $('span').text("Difference");
}
          else if(dsize==3)
            {
​​​​ $('span').text("General");
}
          else if(dsize==4)
            {
          $('span').text("Okay");
}
          else if(dsize==5)
            {
​​​​ $('span').text("Very good");
}
});
});



My personal ability is limited, so the work is not very beautiful. Friends in need can take it and beautify it, haha.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template