jquery实现五星好评

最新推荐文章于 2022-10-13 19:40:34 发布

trainhui

最新推荐文章于 2022-10-13 19:40:34 发布

阅读量235

点赞数

分类专栏： demo

本文链接：https://blog.csdn.net/trainhui/article/details/98790054

版权

demo 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五星好评</title>
		<style>
			ul li{
				float: left;
        		list-style:none;
        		margin: 10px;
        		cursor: pointer;
        		
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
	</head>
	<body>
		<div>
			<ul id="starFath" >
			<li id="1">? </li>
			<li id="2">? </li>
			<li id="3">? </li>
			<li id="4">? </li>
			<li id="5">? </li>
		   </ul>
		</div>
		
		<script type="text/javascript">	
			//显示左边的★
			$("li").mouseover(function(){
				var num=this.id;
              $("li").each(function(index,elemnet){
              	 if(index<num){
              	 	$(elemnet).text("?");
              	 }
              });	
              //显示右边的☆
                  $("li").each(function(index,elemnet){
              	 if(num<=index){
              	 	$(elemnet).text("? ");
              	 }
              });
              
         
			});
		</script>
			
			
		
	</body>
</html>

trainhui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现五星好评

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>五星好评</title> <style> ul li{ float: left; list-style:none; margi...
复制链接

扫一扫

专栏目录