五星評分外掛
阿新 • • 發佈:2018-11-21
html程式碼部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .box{ margin: 20px auto; height: 50px; width: 300px; } .box .comment{ font-size: 30px; color: orange; } .comment li{ float: left; cursor: pointer; } ul{ list-style: none; } </style> </head> <body> <div class="box"> <ul class="comment" name="xingji"> <li value="1">☆</li> <li value="2">☆</li> <li value="3">☆</li> <li value="4">☆</li> <li value="5">☆</li> </ul> <input type="text" value="" id="aaa"> </div> </body> </html>
使用的時候可以把input換為隱藏域,現在的目的是為了能看到獲取的值
引入jquery:
<script src="jquery.min.js"></script>
js程式碼:
<script> $(function(){ var wjx_none = '☆'; // 空心五角星 var wjx_sel = '★'; // 實心五角星 //滑鼠移進變實星 $(".comment li").on("mouseover",function(){ $(this).text(wjx_sel).prevAll("li"). text(wjx_sel).end().nextAll().text(wjx_none); $("#aaa").val($(this).val()); }); //滑鼠移出變空星 $(".comment li").on("mouseout",function(){ if($("li.current").length === 0){ $(".comment li").text(wjx_none); }else{ $("li .current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none); } }); //滑鼠點選保持當前狀態 $(".comment li").on("click",function(){ $(this).attr("class","current").siblings().removeClass("current"); $("#aaa").val($(this).val()); // alert($(this).val()); }); }); </script>