jQuery 小白都能秒懂的案例1：星星评价特效

讲 jQuery，用了个例子，星星评价。我 f4，真的是临时想到做这个的。

毕竟 jQuery 太熟悉了，从 1.2 开始用到现在的 3.x。而且这个案例也很简单，如图所示。

主要功能就是点击星星，获取图片的索引，基于索引得到对应的分数。

这里做 5 星，也可以做 10 星，也可以做包含半星的评价。思路都差不多。

素材准备

两个大小一样的图片。

HTML

<!-- 评分 -->
<div class="fenshu">
    <span id="fs">0</span>
    分
</div>
<!-- 评分 end -->

<!-- 星星 -->
<div class="stars">
    <img class="star" src="images/1.png" />
    <img class="star" src="images/1.png" />
    <img class="star" src="images/1.png" />
    <img class="star" src="images/1.png" />
    <img class="star" src="images/1.png" />
</div>
<!-- 星星 end -->

<input type="hidden" value="0" id="starVal"><!-- 隐藏域，便于表单数据存储和提交 -->

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/star.js"></script>

不要忘了在所有 JS 文件的最开始引入 jQuery 文件哦~

CSS

.stars{
    width: 350px;  /* 5张图，每张70px宽 */
}
.stars img{
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}
 
.fenshu{
    font-size: 30px;
}
.fenshu span{
    font-size: 50px;
    color: #f30;
    font-weight: bold;
}

JavaScript

let starsFun = function(){
    let caise = "images/2.png";  // 彩色星星
    let huise = "images/1.png";  // 灰色星星
    let fs = $("#fs");
    let star = $(".star");
    let starVal = $("#starVal");
    star.on("click",function(){
        let $this = $(this);
        // 获取索引
        let index = $this.index();
        // 更改分数
        fs.html( index + 1 );
        starVal.val( index+1 );
        // 当前星星以及前面所有星星变成彩色。这里用了 jQuery 的链式操作。
        $this.attr({
            src: caise
        }).prevAll(".star").attr({
            src: caise
        });
        // 后面所有的星星变成灰色
        $this.nextAll(".star").attr({
            src: huise
        });
    });
};
$(function(){
    starsFun();
});