星星评分jQuery插件

一、前期准备工作

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方法

第二步

• 此插件用户可更改idcontainer，生成星星总数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>

引用效果图