| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <script src="jquery-3.4.1.min.js"></script> | |
| <title>打星星评分</title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .content1,.content2{ | |
| display: inline-block; | |
| } | |
| .content1{ | |
| margin-left: 50px; | |
| margin-top: 20px; | |
| } | |
| .content2{ | |
| position: relative; | |
| left: 0; | |
| top: -9px; | |
| } | |
| span{ | |
| display: none; | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="content1"> | |
| <img src="empty.png" alt="1"> | |
| <img src="empty.png" alt="2"> | |
| <img src="empty.png" alt="3"> | |
| <img src="empty.png" alt="4"> | |
| <img src="empty.png" alt="5"> | |
| </div> | |
| <div class="content2"> | |
| <span>很差</span> | |
| <span>较差</span> | |
| <span>一般</span> | |
| <span>较好</span> | |
| <span>很好</span> | |
| </div> | |
| <script> | |
| let i=-1; | |
| let over = function(){ | |
| $("img").attr("src","empty.png"); | |
| $("span").css("display",‘none‘); | |
| let index = $(this).index(); | |
| $(this).attr("src","shining.png"); | |
| $(`img:lt(${index})`).attr("src","shining.png"); | |
| $("span").css("display",‘none‘); | |
| $("span").eq(index).css("display","inline"); | |
| } | |
| let out = function(){ | |
| let index = $(this).index(); | |
| $(this).attr("src","empty.png"); | |
| $(`img:lt(${index})`).attr("src","empty.png"); | |
| $("span").css("display",‘none‘); | |
| if(i !=-1){ | |
| $("img").attr("src","empty.png"); | |
| $("span").css("display",‘none‘); | |
| $("img").eq(i).attr("src","shining.png"); | |
| $(`img:lt(${i})`).attr("src","shining.png"); | |
| $("span").eq(i).css("display","inline"); | |
| } | |
| } | |
| $("img").hover(over,out); | |
| $("img").click(function(){ | |
| $("img").off("hover"); | |
| let index = $(this).index(); | |
| i=index; | |
| console.log(index); | |
| $(this).attr("src","shining.png"); | |
| $(`img:lt(${index})`).attr("src","shining.png"); | |
| $("span").css("display",‘none‘); | |
| $("span").eq(index).css("display","inline"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
原文：https://www.cnblogs.com/tcq43356/p/11570064.html