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( ...
随机推荐
- adb调试桥(5037端口)
path里添加路径:../platform 查看设备 adb devices 杀死adb:adb kill -server 启动adb:adb start- server adb不能启动解决办法: 1 ...
- SQLite中7（8）形参的query语句的用法
SQLite中7(8)形参的query语句的用法 我们先来看看这种7形参的query语句的形参列表: public Cursor query(String table, String[] column ...
- 为何说 JavaScript 开发很疯狂
[编者按]本文作者为 Sean Fioritto,主要阐述了 JavaScript 开发为何让人有些无从下手的根本原因.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 网络开发乐趣多多!Ja ...
- Swiper-轮播图。
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动. 初始化 <!DOCTYPE html> <html> < ...
- Coroutine及其实现
线程是内核对外提供的服务,应用程序可以通过系统调用让内核启动线程,由内核来负责线程调度和切换.线程在等待IO操作时线程变为unrunnable状态会触发上下文切换.现代操作系统一般都采用抢占式调度,上 ...
- IP地址分类及CIDR划分方法
IP地址的分类和表示有三种形式,1.分类的IP地址.2.子网划分.3.无分类编址CIDR 1.分类的IP地址 IP地址:: = {<网络号>,<主机号>} 不同的网络号和主机号 ...
- 《C++ Primer Plus》读书笔记之八—对象和类
第十章 对象和类 1.面向对象编程(OOP)的特性:抽象.封装和数据隐藏.多态.继承.代码的重用性. 2.指定基本类型完成了3项工作:①决定数据对象需要的内存数量.②决定如何解释内存中的位(lon ...
- .NET Reflector注册机激活方法
.NET Reflector注册机是一款专门针对.NET Reflector(.NET反编译工具软件)而推出的一款破解辅助工具软件.因为官方破解版软件需要118美元才能用,不然只有14天的试用期,为此 ...
- 我的第一个springboot应用+maven依赖管理
第一步:使用Eclipse创建maven工程SpringBootFirst:工程目录如下 第二步:编写依赖文件pom.xml <project xmlns="http://maven. ...
- 第三周：Excel分析
Excel常用于敏捷,快速,需要短时间相应的场景下是非常便捷的数据处理工具. 相对于语言类例如python和R等则用于常规的,规律的场景中应用,便于形成日常规则统计分析. 对于学习的路径:Excel函 ...