超级简单的jQuery纯手写五星评分效果
2024-09-04 00:32:28
超级简单的评分功能,分为四个步骤轻松搞定:
第一步:
引入jquery文件;这里我用百度CDN的jquery:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
第二步:
写HTML代码;这里的星星我用的是符号的星星,也可以做成图片,用2张背景图片进行切换:
<div class="score_star">
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<p>您还未评价</p>
</div>
第三步:
写CSS样式;这里我为了方便把样式写在head里面:
<style type="text/css">
.score_star {text-align: center;}
.score_star i {color: #999;font-size: 28px;font-style: normal;cursor: pointer;}
.score_star i.on {color: #c8a377;}
</style>
第四步:
写JavaScript代码;好了,打瞌睡的童鞋抬起头,灯光照过来,往死里照,要画重点了:
重点是slice(0,1)方法,就是选中重第0个到第1个,第一个数字是从0开始算起,第二个数字是从1开始算起的。
<script type="text/javascript">
$(function(){
// 星星选择评价事件
$(".score_star >i").click(function(event) {
// 点击当前
var _index = $(this).index();
// 所有的星星
var i = $(this).parent().find("i");
i.removeClass("on");
// 点击第i个,第一个到i个添加类名on
switch(_index){
case 0:
i.slice(0,1).addClass("on");
$(this).siblings('p').html("我有一个退货想和你谈谈");
break;
case 1:
i.slice(0,2).addClass("on");
$(this).siblings('p').html("已被99%人超越");
break;
case 2:
i.slice(0,3).addClass("on");
$(this).siblings('p').html("只能说一般般");
break;
case 3:
i.slice(0,4).addClass("on");
$(this).siblings('p').html("骚年还不错");
break;
case 4:
i.slice(0,5).addClass("on");
$(this).siblings('p').html("一见钟情");
break;
default:
alert("少年醒醒,你的代码出bug了");
break;
}
});
});
</script>
最后,整个代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易-星星评分-功能-jQuery纯手写</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
.score_star {text-align: center;}
.score_star i {color: #999;font-size: 28px;font-style: normal;cursor: pointer;}
.score_star i.on {color: #c8a377;}
</style>
</head>
<body>
<div class="score_star">
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<i>★</i>
<p>您还未评价</p>
</div>
<script type="text/javascript">
$(function(){
// 星星选择评价事件
$(".score_star >i").click(function(event) {
// 点击当前
var _index = $(this).index();
// 所有的星星
var i = $(this).parent().find("i");
i.removeClass("on");
// 点击第i个,第一个到i个添加类名on
switch(_index){
case 0:
i.slice(0,1).addClass("on");
$(this).siblings('p').html("我有一个退货想和你谈谈");
break;
case 1:
i.slice(0,2).addClass("on");
$(this).siblings('p').html("已被99%人超越");
break;
case 2:
i.slice(0,3).addClass("on");
$(this).siblings('p').html("只能说一般般");
break;
case 3:
i.slice(0,4).addClass("on");
$(this).siblings('p').html("骚年还不错");
break;
case 4:
i.slice(0,5).addClass("on");
$(this).siblings('p').html("一见钟情");
break;
default:
alert("少年醒醒,你的代码出bug了");
break;
}
});
});
</script>
</body>
</html>
点击展示所有代码
怎么样,是不是很简单?
最新文章
- SQL经典面试题及答案
- java 22 - 7 多线程之控制线程的方法
- 关于打开MTK_SDCARD_SWAP 宏后MTK目前升级方案和 关于打开MTK_SHARED_SDCARD宏后MTK目前升级方案
- openstack 入门1
- textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用场景和区别
- struts2中struts.xml配置文件详解
- Linux input子系统 io控制字段【转】
- STM32F429学习笔记(一)触屏工程Keil建立
- CF235B Let&#39;s Play Osu! 期望DP
- kernel笔记——块I/O
- java反射之获取所有方法及其注解(包括实现的接口上的注解),获取各种标识符备忘
- Sqlite3并发读写注意事项
- MySQL高级02
- HashMap出现Hash DOS攻击的问题
- 递归删除服务器log文件
- Flask学习【第11篇】:整合Flask中的一些知识点
- go test命令參数问题
- YII中利用urlManager将URL改写成restful风格
- 利用canvas将网页元素生成图片并保存在本地
- centos7安装maven