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();
});