用Jquery+HTML寫星星評分
阿新 • • 發佈：2020-11-29
類似於實現這樣：
-----
index.html:
<!DOCTYPE html> <html> <head> <title>星星評分</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--引入jquery--> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/index.js"></script> </head> <body> <div class="box clear"> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="list"> <i class="star1"></i> <i class="star"></i> </div> <div class="txt">非常好</div> </div> </body> </html>
--
index.js:
$(function(){ //定義一個arr陣列，值為："非常差",'差',"一般","滿意","非常滿意" var arr=["非常差",'差',"一般","滿意","非常滿意"]; //滑鼠經過 $('.list').mouseover(function(){ $(this).nextAll().find(".star1").css("z-index","0");//每次移動進去後，先讓next所有同輩元素都是灰色星星 $(this).find(".star1").css("z-index",1);//讓移上去的哪個自己是黃色星星 $(this).prevAll().find(".star1").css("z-index",1);//讓移上去哪個星星的前面的所有同輩元素都是黃色星星 $(".txt").text(arr[$('.box').find(".list").index($(this))]);//通過父元素，獲得當前元素在父元素中的index }) })