jquery簡單幾句代碼實現星級評論效果
阿新 • • 發佈：2018-02-28
簡單的 play ctype 文件的 this url enter oct 引用文件
我前面博客寫過一個星級評論的原生寫法，非常復雜，今天就通過jquery來寫一個簡單的星級點亮的效果，來看代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .ct-star { display: inline-block; margin: 0 1px; width: 19px; height: 19px; background: url(img/stars.png) no-repeat; vertical-align: -2px; cursor: pointer; } .ic-star-off { background-position: -39px 0; } </style> </head> <body> <span class="star"> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> <b class="ct-star ic-star-off"></b> </span> </body> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ $(".star b").on("mouseenter",function(){ $(this).removeClass("ic-star-off").prevAll().removeClass("ic-star-off"); }); $(".star").on("mouseleave",function(){ $(this).children().addClass("ic-star-off"); $("b.curr").removeClass("ic-star-off").prevAll().removeClass("ic-star-off"); }); $(".star b").on("click",function(){ $(this).addClass("curr").siblings().removeClass("curr") }) }) </script> </html>
效果圖就不展示了，將代碼拷貝自己可以試試哦，一定要註意自己引用文件的路徑！好了，今天就寫這麽一個簡單的小例子。
jquery簡單幾句代碼實現星級評論效果