Jquery学习笔记--五角星评分
Posted Jacklovely
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery学习笔记--五角星评分相关的知识，希望对你有一定的参考价值。
网购五星评分模拟：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 </head> 8 <body> 9 <div> 10 <span class="star">☆</span> 11 <span class="star">☆</span> 12 <span class="star">☆</span> 13 <span class="star">☆</span> 14 <span class="star">☆</span> 15 </div> 16 </body> 17 <script type="text/javascript"> 18 var isclick = 0; 19 var clicknum = 0; 20 //鼠标滑过，编程黑五角星 21 $(‘span‘).mouseover(function(){ 22 // if (isclick==0) { 23 var num = $(this).index(); 24 // alert(num); 25 $(‘span‘).each(function(){ 26 if ($(this).index()<=num) { 27 $(this).html(‘★‘); 28 }else{ 29 if ($(this).index()>clicknum) { 30 $(this).html(‘☆‘); 31 } 32 } 33 }); 34 // } 35 }); 36 //鼠标离开div，变回空心五角星 37 $(‘div‘).mouseleave(function(){ 38 if (isclick==0) { 39 $(‘span‘).each(function(){ 40 if ($(this).index()>clicknum) {} 41 $(this).html(‘☆‘); 42 }); 43 }else{ 44 $(‘span‘).each(function(){ 45 if ($(this).index()>clicknum) { 46 $(this).html(‘☆‘); 47 } 48 }); 49 } 50 }); 51 //鼠标点击，固定黑五角星，并且重新点击后重新固定，离开后不变 52 $(‘span‘).click(function(){ 53 isclick = 1; 54 clicknum = $(this).index(); 55 $(‘span‘).each(function(){ 56 if ($(this).index()<=clicknum) { 57 $(this).html(‘★‘); 58 }else{ 59 $(this).html(‘☆‘); 60 } 61 }); 62 }); 63 </script> 64 </html>
以上是关于Jquery学习笔记--五角星评分的主要内容，如果未能解决你的问题，请参考以下文章