五星评分
Posted 坚持最难，但成果也最大
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了五星评分相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } body { background: #000000; } .comment { font-size: 40px; color: yellow; } .comment li { float: left; cursor: pointer; } ul { list-style: none; } </style> </head> <body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> /* * 当我鼠标移上到其中一个li身上的时候 应该让这个li以及它之前的li都变成实心的星星 * * 单击时候 记下来当前单击的这个li * * 当我离开以后全部清空 到底清空不清空 取决于单击过没单击过 * 当移出去的时候 可以先将所有的全部清空 然后保留当时单击的那个li 以及之前的 * * */ var star1 = "☆"; var star2 = "★"; $("ul li").on({ "mouseover":function(){ //为了防止干扰 暴力清空所有 $("ul li").text(star1); // 移到谁身上让谁显示实心星星以及它之前的li都显示实心 $(this).text(star2).prevAll().text(star2); }, "click":function(){ // 让别人都去掉激活类 让当前的li 加上这个类 为了单独标记一下 $(this).addClass("active").siblings().removeClass("active"); }, "mouseout":function(){ // 先让所有都清空 $("ul li").text(star1); // 让之前被标记过的那个li变成实心星星 以及让它之前的li也变成实心的星星 $("ul li.active").text(star2).prevAll().text(star2); } }) </script> </html>
以上是关于五星评分的主要内容，如果未能解决你的问题，请参考以下文章