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( ...
随机推荐
- C++ 判断当前系统x64 or x86
BOOL IsWow64(){ BOOL bIsWow64 = FALSE; //IsWow64Process is not available on all supported versions o ...
- PS改变图像颜色
由于写的一个页面主色调变了,里面的一些图标颜色也要相应改变,自己难得重新去psd里面截图,就想着用ps,看能否直接能变换一下图标颜色.其实方法也很简单的. 1:用ps打开需要改变图标颜色的文件,然后选 ...
- 少个人保护？我来！——阿里云在ICANN第3届GDD峰会纪实
西班牙马德里以足球和斗牛闻名于世,2017年5月9日至11日,ICANN第三届全球域名部门行业峰会(GDD)在这里召开.阿里云作为亚洲域名保有量最高的注册商,代表成千上万客户的利益与权力,派出代表,前 ...
- 直接拿去用！每个App都会用到的LoadingLayout
前言 项目里都会遇到几种页面,分别为加载中.无网络.无数据.出错四种情况,经常要使用,所以封成库引用了,方便使用,顺便分享出来.先看一下效果: 原理比较简单,继承FrameLayout,在xml渲染完 ...
- Java 性能调优指南之 Java 集合概览
[编者按]本文作者为拥有十年金融软件开发经验的 Mikhail Vorontsov,文章主要概览了所有标准 Java 集合类型.文章系国内 ITOM 管理平台 OneAPM 编译呈现,以下为正文: 本 ...
- linux 局域网探测工具nmap
NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工 具包,其基本功能有三个, 一是探测一组主机是否在线: 其次是扫描主机端口,嗅探所提供的网络服务: 还可以推断主机所用的操 ...
- RHEL7系统管理之网络管理
1. RHEL7的网络介绍 在RHEL7中, NetworkManager 提供的默认联网服务是一个动态网络控制和配置守护进程, 支持ifcfg类型的配置文件. NetworkManager 可用于连 ...
- 奇怪的等待事件“enq: ss - contention”
数据库有时会遇到大量的进程发生'enq: ss - contention'等待,持续5到10分钟,然后自动消失.从字面上看,'SS'是Sort Segment: select * from v$loc ...
- IP地址分类及CIDR划分方法
IP地址的分类和表示有三种形式,1.分类的IP地址.2.子网划分.3.无分类编址CIDR 1.分类的IP地址 IP地址:: = {<网络号>,<主机号>} 不同的网络号和主机号 ...
- 阿里云CentOS 7服务器挂载数据盘
本次使用的是centOS 7.4 64位操作系统 第一步:查看磁盘情况 我们发现,我总共有三个磁盘,分别为/dev/vda(100G)./dev/vdb(200G)./dev/vdc(100G),而被 ...