一、前期准备工作
1.下载font-awesome或引进都可以
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
-实心星星样式
<i class="fa fa-star" aria-hidden="true" ></i>
-空心星星样式
<i class="fa fa-star-o" aria-hidden="true" ></i>
2.引进jquery
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
</script>
3.创建div
用于测试效果
<div id="container"></div>
二、实现js效果
最终效果图
1.需要实现的效果
- 默认生成实心star和空心star
- 鼠标移入时，从开始位置到当前位置都为fa-star(实心)，其他为fa-star-o(空心)
- 鼠标移出恢复复默认样式
- 鼠标点击时，从开始位置到当前位置都为fa-star(实心)，其他为fa-star-o(空心)
2.思考实现
2.1 默认生成实心star和空心star
var count = 10 //生成star总数
var score = 5 //生成实心数
for (let i = 0; i < count; i++) {
//定义生成star的i标签，为实心和空心的公共部分
var star = $(`<i class="fa star" aria-hidden="true" style="color:gold;font-size:12px;"></i>`)
//控制实心个数
if (i < score) {
//添加实心样式
star.addClass("fa-star")
} else {
//添加空心样式
star.addClass("fa-star-o")
}
//在div中添加
$("#container").append(star)
}
默认效果图
2.2鼠标移入mouseenter
- 使用index()找到当前star的位置，遍历所有的star,开始到当前为fa-star，其他为fa-star-o
$(".star").mouseenter(function () {
//获取当前元素的位置
var val = $(this).index() + 1
$(".star").each(function (i) {
if (i < val) {
//当前元素增加实心样式去除空心样式
$(this).addClass("fa-star").removeClass("fa-star-o")
} else {
//当前元素增加空心样式去除实心样式
$(this).addClass("fa-star-o").removeClass("fa-star")
}
})
})
鼠标移入
2.3鼠标移出mouseleave
- 恢复默认样式（开始生成时）（鼠标未点击）
- 移除后，开始到点击位置star都为实心（鼠标点击以后），通过变量score控制数量
$(".star").mouseleave(function () {
$(".star").each(function (i) {
if (i < score) {
//当前元素增加实心样式去除空心样式
$(this).addClass("fa-star").removeClass("fa-star-o")
} else {
//当前元素增加空心样式去除实心样式
$(this).addClass("fa-star-o").removeClass("fa-star")
}
})
})
2.4鼠标点击click
- 点击之后，开始到点击位置为实心，改变score的值来实现
$(".star").click(function () {
score = $(this).index() + 1
})
3.改善代码
- 实现效果后，检查所写代码是否存在重复，有可将重复的部分改写成函数，进行封装调用，减少代码量
鼠标移入和移出处代码重复，可进行封装,改善如下
//重复部分封装成setStar函数
function setStar(val) {
$(".star").each(function (i) {
if (i < val) {
$(this).addClass("fa-star").removeClass("fa-star-o")
} else {
$(this).addClass("fa-star-o").removeClass("fa-star")
}
})
}
//鼠标移入
$(".star").mouseenter(function () {
setStar($(this).index() + 1)
})
//鼠标移出
$(".star").mouseleave(function () {
setStar(score)
})
三、升级为插件
1.思考插件需要做到什么
- 引入相关文件即可使用
- 有复用性，在这个项目中可以使用，另一个项目中也可以使用
- 有易用性，用户调用简单，不繁琐
2.根据思考完善内部代码，用户可根据需求更改参数
第一步
- 创建raty.js，定一个闭包区域，防止插件污染
- 使用$.fn.extend()扩展jquery 方法，制作插件
;
(()=>{
$.fn.extend({
raty(options){ }
})
})()
;
注意：
$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，$.extend方法是在jQuery全局对象上扩展方法；
$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法
扩展jQuery的公共方法一般用$.extend方法
定义插件一般用$.fn.extend方法
第二步
- 此插件用户可更改id
container，生成星星总数count、默认实心数score、颜色color、大小size
参数较多，所以用对象传参（不更改的情况有默认值）- 对原代码中的变量进行修改
代码如下：
// 默认值
var settings = {
count: 10,//star总数
score: 5,//star实心数
color: "gold",//star颜色
size: "12px"//star大小
}
$.extend(settings, options)//合并两个对象,将用户传过来的值更新到settings中
settings.container = "#" + this.attr("id")//获取调用id
for (let i = 0; i < settings.count; i++) {
var star = $(`<i class="fa star" aria-hidden="true" style="color:${settings.color};font-size:${settings.size};"></i>`)
if (i < settings.score) {
star.addClass("fa-star")
} else {
star.addClass("fa-star-o")
}
$(settings.container).append(star)
}
第三步
- 检查代码，防止效果互相影响
例如如下情况：
代码不严谨，效果相互影响展示
- 效果只能在当前调用id内发生，不能影响其他id,；
遍历star也只能在当前调用star内；
所以在鼠标事件中加入idsettings.container,函数setStar中也加入settings.container
更改代码如下：
//在当前调用的id里面
$(settings.container + " .star").mouseenter(function () {
setStar($(this).index() + 1)
})
$(settings.container + " .star").mouseleave(function () {
setStar(settings.score)
})
$(settings.container + " .star").click(function () {
settings.score = $(this).index() + 1
})
function setStar(val) {
$(settings.container + " .star").each(function (i) {
if (i < val) {
$(this).addClass("fa-star").removeClass("fa-star-o")
} else {
$(this).addClass("fa-star-o").removeClass("fa-star")
}
})
}
四、使用方法
1.下载或引用font-awesome
因为插件使用的星星是font-awesome的图标，所以需要引入或者下载
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
2.引进jquery
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
3.创建div
创建两个div进行测试，一个展示默认效果，一个展示传参后效果
<!-- 默认效果 -->
<p>默认效果</p>
<div id="container"> </div>
<!-- 更改 -->
<p>传参后</p>
<div id="container2"></div>
4.在script中引用
<script>
$("#container").raty()
$("#container2").raty({
count: 6,
score: 1,
color: "Crimson"
})
</script>
引用效果图
