1.实现效果

1.1 基本效果展示：

1.2 鼠标移入星星点亮，鼠标移出星星暗淡，鼠标点击星星常亮；星星后面的文字随着点亮的星星数来变化：

1.3 底部固定栏和用户评价栏的星星需要保持联动

2.代码部分

2.1 html

<!-- 上方的星星 -->
<div class="resource-review clearfix">
    <span class="fl">评价资源：</span>
    <span class="fl all1">
        <span class="no-star"></span>
        <span class="no-star"></span>
        <span class="no-star"></span>
        <span class="no-star"></span>
        <span class="no-star"></span>
    </span>
    <p class="score">（点击可以评分）</p>
</div>

<!-- 下方的星星 -->
<div class="stars fl clearfix">
    <h4 class="fl">评价资源：</h4>
    <span class="fl all2">
        <span class="no-star"></span>
        <span class="no-star"></span>
        <span class="no-star"></span>
        <span class="no-star"></span>
        <span class="no-star"></span>
    </span>
</div>

<script src="./js/jquery-1.9.1.min.js"></script>
<script>
    // 星星高亮
    function highlight(item) {
        $(item).removeClass('no-star').addClass('full-star').prevAll().removeClass('no-star').addClass('full-star')
    }
    // 星星变暗
    function dim(item) {
        $(item).removeClass('full-star').addClass('no-star').prevAll().removeClass('full-star').addClass('no-star')
    }

    function level(index) {
        if (index == 1) {
            $('.score').text('（很差）')
        }
        if (index == 2) {
            $('.score').text('（较差）')
        }
        if (index == 3) {
            $('.score').text('（还行）')
        }
        if (index == 4) {
            $('.score').text('（推荐）')
        }
        if (index == 5) {
            $('.score').text('（力荐）')
        }
    }

    // 评分处理
    function scoreHandler() {
        var index = $(this).index() + 1
        highlight(`.all2 span:nth-child(${index})`)
        highlight(`.all1 span:nth-child(${index})`)
        level(index)
    }

    // 鼠标移动处理
    function slideHandler() {
        const index = $(this).index() + 1
        dim(`.all1 span:nth-child(${index})`)
        highlight('.all1 span[num = 5]')
        // highlight('.all1 span')
        dim(`.all2 span:nth-child(${index})`)
        highlight('.all2 span[num = 5]')
        $('.score').text('（点击可以评分）')
    }

    // 联动
    $('.all1 span, .all2 span').on('mouseenter', scoreHandler
    ).on('mouseleave', slideHandler).click(function () {
        const index = $(this).index() + 1
        $(`.all1 span:nth-child(${index})`).attr('num', '5').siblings('span').removeAttr('num')
        $(`.all2 span:nth-child(${index})`).attr('num', '5').siblings('span').removeAttr('num')
        $('.all1 span, .all2 span').off('mouseleave').off('mouseenter')
    })
</script>

2.2 css

/* 上方的星星 */
.resource-review {
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  margin-top: 10px;
}
.resource-review .all1 {
  font-size: 0;    /* 清除 span 之间的空隙 */
}
.resource-review .no-star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/star_disable.png') no-repeat;
  vertical-align: top;
}
.resource-review .full-star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/star_normal.png');
  vertical-align: top;
}
.resource-review p {
  font-size: 14px;
  color: #AAAAAA;
}

/* 下方的星星 */
.all2 {
  font-size: 0;
}
.all2 .no-star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/star_disable.png') no-repeat;
  vertical-align: middle;
}
.all2 .full-star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('../images/star_normal.png');
  vertical-align: middle;
}

3.结语

最近一直在维护老项目，jquery 相关的东西都已经忘的差不多了。虽然功能是实现了，但总觉得有些不足之处，记录一下以便后面可以回头优化。