jQuery----五星好评实现
在美团、淘宝、京东等网页上，有许多商品、服务评价页面，五星好评功能很常见，本文利用jQuery实现五星好评功能。
案例图片：
案例需求：
如左图所示，鼠标进入某个五角星，该五角星包括之前的五角星全部变成黄色。
鼠标离开后，变成黄色的恢复原状
当鼠标在某个五角星上点击的时候，该五角星和其之前的五角星全部变成黄色，鼠标离开后，颜色也不会恢复过来。
实现思路：
①获取所有的li（五角星全部存在于li标签中），给$(this)注册mouseover、mouseout、click事件
②mouseover事件中，将当前和前面的五角星变成黄色
$(this).text("★").prevAll("li").text("★")；
③click事件中，给当前点击的li五角星赋予index属性，方便在鼠标滑出的时候，能够保存点击时候五角星及之前五角星的状态，同时清除其他所有的li的index属性
$(this).attr("index",1).siblings("li").removeAttr();
④mouseout事件中，所有的li变为空白，但是属性index有值的li及其前面的li变为黄色
$(this).text("☆").siblings().text("☆")；
$( " li [indx=1] ").text("★").prevAll().text("★")；
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
} li {
float: left;
font-size: 39px;
color: yellow;
}
</style> <script src="jquery-1.12.2.js"></script>
<script type="text/javascript">
$(function(){
//获取所有的li,注册鼠标移入事件
$("li").mouseover(function(){
$(this).text("★").prevAll().text("★");
}).mouseout(function(){
$(this).text("☆").siblings().text("☆");
$("li[index=1]").text("★").prevAll().text("★");
}).click(function(){
$(this).attr("index",1).siblings().removeAttr();
});
});
</script>
</head>
<body>
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
jQuery----五星好评实现的更多相关文章
- 如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...
- jQuery实现简单的五星好评
最近一直在认真的努力工作,今天工作完成得差不多了,比较轻松点,在工作中有遇到用jq实现五星好评功能,觉得简单又有用,所以空闲时间就想分享出来. css部分: <style> .u_star ...
- js五星好评
一般我们在一些购物以及美食的网站都会看到五星好评之类的,一下是使用js制作的五星好评! <!DOCTYPE html> <html lang="en"> & ...
- 亲，麻烦给个五星好评！—RatingBar
引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
- jquery 五星评价(图片实现)
1111 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- python爬虫06 | 你的第一个爬虫，爬取当当网 Top 500 本五星好评书籍
来啦,老弟 我们已经知道怎么使用 Requests 进行各种请求骚操作 也知道了对服务器返回的数据如何使用 正则表达式 来过滤我们想要的内容 ... 那么接下来 我们就使用 requests 和 re ...
- UWP 五星好评
var pfn = Package.Current.Id.FamilyName; await Launcher.LaunchUriAsync(new Uri("ms-windows-stor ...
- JQ五星好评效果
$(".list-txt ul").find("li").click(function(){ if($(this).index()==0){ ...
- js五星好评2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python爬虫06取当当网 Top 500 本五星好评书籍
主要思路 使用 page 变量来实现翻页 我们使用 requests 请求当当网 然后将返回的 HTML 进行正则解析 由于我们暂时还没学到数据库 所以解析完之后就把内容存到文件中 def main( ...
随机推荐
- Dialog向Activity传递数据
PopupDialog中声明一个内部接口PriorityListener,接口中声明一个回调函数refreshPriorityUI,用于在 Dialog的监听事件触发后刷新Activity的UI显示. ...
- 从CVE-2018-1273看漏洞分析
漏洞分析的边界 漏洞分析最应该关注的是漏洞相关的代码,至于其余的代码可以通过关键位置下断点,来理解大概功能. 其中最关键的就是了解数据流,找到离漏洞位置最近的 原始数据 经过的位置,然后开始往下分析, ...
- python匿名函数 高阶函数 内置函数 文件操作
1.匿名函数 匿名就是没有名字 def func(x,y,z=1): return x+y+z 匿名 lambda x,y,z=1:x+y+z #与函数有相同的作用域,但是匿名意味着引用计数为0,使用 ...
- Sql Server中的谓词和运算符
谓词和运算符配合使用是我们得到理想数据的最佳途径. 一.浅谈谓词 谓词的概念:一个运算结果为True.False或Unknown的逻辑表达式.它的运用范围有:where子句.Having子句.Chec ...
- eclipse中如何添加tomcat插件
本篇简短的介绍了如何安装tomcat插件,因为不eclipse中不安装插件就没有tomcat图标,也就无法正常关闭服务器而只能terminate.废话不多说,直接进入主题: 1.首先下载一个tomca ...
- ASP.NET MVC下Bundle的使用
ASP.NET MVC中Bundle是用于打包捆绑资源的(一般是css和js),它是在全局文件Global.asax.cs中注册Bundle,而注册的具体实现默认是在App_Start文件夹的Bund ...
- 使用Docker构建AspNetCore应用
#Build Image Stage FROM microsoft/aspnetcore-build:2 AS build-env WORKDIR /api # 以下为优化还原,因为项目文件不常变动D ...
- Civil War
Civil War 编辑 <Civil War>是美国硬摇滚乐队枪炮与玫瑰的一首单曲,首次收录于1990年的群星慈善专辑<Nobody's Child: Romanian Angel ...
- 硬盘上的一些算法小题目||and今天看了下林锐的书以及gdb调试 及一些变成算法小题目
gdb调试:观察点,断点,事件捕捉点.step 进入函数,next 跳过函数,until 跳出循环,finish 结束函数 林锐:书后试题 & c++的对象模型图 看了二叉树的非递归遍历, 链 ...
- jQuery复制table header到表格的最下面
为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现: 1 2 3 4 5 var $tfoot = $(''); $($('t ...