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( ...
随机推荐
- Flutter自定义标题栏之处理状态栏高度
App在很多情况下由于各种需求需要自定义标题栏,而在能够构建Android和IOS应用的Flutter中,如果不在Scaffold中使用AppBar会发现默认是沉浸式. 猜想:我们使用自定义标题栏好像 ...
- android控件TextView之 分段显示不同颜色
代码如下: attrs.xml文件: 第二种方式: String newMessageInfo = "<font color='red'><b>" + 红色 ...
- mybatis 的动态SQL
在XML 中支持的几种标签: • if • choose.when.otherwise • where • set • trim • foreach OGNL 表达式 1. el or e22. el ...
- leetCode题解 Reverse Words in a String III
1.题目描述 Given a string, you need to reverse the order of characters in each word within a sentence wh ...
- windows多线程同步
概述 任何单个应用程序都不能完全使该处理器达到满负荷.当一个线程遇到较长等待时间事件时,同步多线程还允许另一线程中的指令使用所有执行单元.例如,当一个线程发生高速缓存不命中,另一个线程可以继续执行.同 ...
- [控件] TranformFadeView
TranformFadeView 效果图: 源码地址: https://github.com/YouXianMing/UI-Component-Collection 注意: maskView是iOS8 ...
- [翻译] About Core Image
About Core Image Core Image is an image processing and analysis technology designed to provide near ...
- $.ajax 在请求没有完成，是可以往下继续执行js代码的
$.ajax({ url:url, data:{}, success:function(arr) { var varHtml='<option value="" checke ...
- 一、TCL事务控制语言 二、MySQL中的约束 三、多表查询（重点） 四、用户的创建和授权 五、MySQL中的索引
一.TCL事务控制语言###<1>事务的概念 事务是访问并可能更新数据库中各种数据项的执行单元. 事务是一条SQL语句,一组SQL语句,或者整个程序. 事务是恢复和并发控制的基本单位. 事 ...
- 内置数据结构（str）
一.字符串(str) 1.字符串在python2版本中为一个byte序列,在python3版本中为一个unicode序列,并且字符串是不可变的. sr = str() sr = 'string' sr ...