jquery实现五角星评分案例

news/2024/7/10 22:38:42 标签: jquery

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.all{
				list-style: none;
				font-size: 50px;
			}
			.all>li{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<ul class="all">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(function(){
		//prev查找上一个兄弟,prevAll查找上面所有的兄弟
		//next查找下一个兄弟,nextAll查找后面所有的兄弟
		var sx_wjx = '★';
		var kx_wjx = '☆';
		$('.all>li').on('mouseenter',function(){
			//$(this).text(sx_wjx).prevAll().text(sx_wjx);
			//$(this).nextAll().text(kx_wjx);
			//使用end方法返回上一个状态
			$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx)
		}).on('mouseleave',function(){
			$('.all>li').text(kx_wjx);
			//给标记的五角星以及之前的五角星变为实心
			$('.all>li[biaoji]').text(sx_wjx).prevAll().text(sx_wjx);
		}).on('click',function(){
			//给要点击的li做一个标记,attr添加属性
			$(this).attr('biaoji','aaa').siblings().removeAttr('biaoji');
		})
	})
</script>

http://www.niftyadmin.cn/n/1318665.html

相关文章

[探讨java深入的不变模式] java中String类的用法

不变模式(Immutable Pattern)顾名思义&#xff0c;它的状态在它的生命周期内是永恒、不会改变的。对于其中的不变类(Immutable Class)&#xff0c;它的实例可以在运行期间保持状态永远不会被改变&#xff0c;所以不需要采取共享互斥机制来保护,如果运用得当可以节省大量的时间成…

【转载51CTO】Linux中引号那些事儿

原文链接&#xff1a;http://os.51cto.com/art/201207/348855.htm我们将把编写脚本的事情暂时搁在一边&#xff0c;然后来讨论一些&#xff0c;我们一直在用的&#xff0c;但是没有解释的东西。引号在这一节里面&#xff0c;我们会讲述引号。引号有两个作用&#xff1a;控制字符…

vscode开发微信小程序解决.wxml,.wxss不高亮问题

以下两种方式任选其一即可解决问题~~~ 一、在设置中添加如下配置 "files.associations": {"*.wxml": "html","*.wxss": "css",},二、在应用商店安装插件 感谢支持&#xff01;&#xff01;&#xff01;❤

在Eclipse中查看JDK类库的源代码

在Eclipse中查看JDK类库的源代码&#xff0c;如发现没有关联源代码&#xff0c;如下所示&#xff1a; 可通过如下设置查看JDK类库的源代码。 1.点 “window”-> "Preferences" -> "Java" -> "Installed JRES" 2.此时"Ins…

嵌入式日志输出

嵌入式开发进行调试或者查找BUG时&#xff0c;常见的两种方法是仿真和日志打印的。但是在编写嵌入式软件程序过程时&#xff0c;并不是所有的硬件都支持仿真或者方便仿真&#xff0c;所以大多数方法是加打印信息来进行查找问题的。打印的接口有很多种&#xff0c;比如串口&…

C#知识点

程序代码在编译后生成可执行的应用&#xff0c;我们首先要了解这种可执行应用程序的结构。 应用程序结构分为应用程序域—程序集—模块—类型—成员几个层次&#xff0c;公共语言运行库加载器管理应用程序域&#xff0c;这种管理包括将每个程序集加载到相应的应用程序域以及控…

Linux下nginx安装和使用(超详细版)

安装准备 1.下载Linux下jdk8压缩包 https://share.weiyun.com/8EJ04aNO 2.下载Linux下tomcat压缩包 https://share.weiyun.com/bqrv1CsC 内容大纲什么是nginxnginx 单击版安装 启动 服务使用nginx 做负载均衡nginx支持的负载均衡的策略使用keepalived 完成 nginx 高可用配置什…

我的WordPress所使用的Ping List

什么是Ping服务&#xff0c;很多人可能还不明白。Ping 服务&#xff0c;实际上是一种更新通知服务&#xff0c;它可以将您的博客更新自动通知博客目录和搜索引擎&#xff0c;加快网站被搜索引擎收录的速度。 WordPress的Ping List 可以通过后台里的“设置&#xff08;Option&am…