个人学习记录3：星星评级功能

星星评级效果

<div class="star-box" data-star="3">
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star"></i>
    <i class="icon-star-empty"></i>
    <i class="icon-star-empty"></i>
</div>

// 星星评级功能
$("body").undelegate(".star-box", "mouseover click mouseleave")
    .delegate(".star-box", "mouseover", function(event) {
        // 鼠标悬浮改变星级数量
        var _this = event.target;
        if(_this && _this.nodeName.toUpperCase() == "I"){
            $(event.currentTarget).children().removeClass();
            $(_this).addClass('icon-star').prevAll().addClass("icon-star");
            $(_this).nextAll().addClass("icon-star-empty");
        }
    }).delegate(".star-box", "click", function(event) {
        // 鼠标点击确定改变星级
        var _this = event.target;
        if(_this && _this.nodeName.toUpperCase() == "I"){
            var index = $(_this).index();
            $(event.currentTarget).attr("data-star",Number(index+1));
        }
    }).delegate(".star-box", "mouseleave", function(event) {
        // 离开时，显示原星级
        var starBox = event.currentTarget;
        var starNum = $(starBox).attr("data-star");
        $(starBox).children().removeClass().addClass('icon-star')
        .eq(starNum-1).nextAll().removeClass().addClass('icon-star-empty');
    });

 

转载于:https://www.cnblogs.com/huliang56/p/6210889.html