jQuery淘宝订单星级评分

收藏

最近一个小项目需要一个星级评分的效果，所以去淘宝偷了一个订单评论里的星级评分，自己原创，不是仿的哦，代码不是很复杂。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在页面加上速度评价、服务评价、满意度的星星代码：

<div class="stars">
    <label>速度评价：</label>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
</div>
<div class="stars">
    <label>服务评价：</label>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
</div>
<div class="stars">
    <label>满意度：</label>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
    <img src="images/star_gray.png"/>
</div>

jQuery

接着我们定义评论的三维数组：

var data = [
        [
            ['很差', '我觉得永远都收不到了'],
            ['一般', '速度太慢，三五个月吧'],
            ['好', '速度还行，正常范围'],
            ['很好', '速度不错，三四周就到手了'],
            ['非常好', '这次是真快！非常满意']
        ],
        [
            ['很差', '这家有服务吗！？'],
            ['一般', '态度较差，不能解决问题'],
            ['好', '客服反应慢，附加服务较少'],
            ['很好', '不错，附加服务多多,客服热情'],
            ['非常好', '附加服务全面，需要的都有']
        ],
        [
            ['很差', '以后不会再来了,商品一般'],
            ['一般', '价格没优势,还行'],
            ['好', '特价时能看看,经常买的一家了'],
            ['很好', '相当不错,目前买同类产品最好的一家了'],
            ['非常好', '货品全，折扣大，不砍单']
        ]
];

鼠标悬浮各个图片的样式定义：

var stars = [
        ['star_hover.png', 'star_gray.png', 'star_gray.png', 'star_gray.png', 'star_gray.png'],
        ['star_hover.png', 'star_hover.png', 'star_gray.png', 'star_gray.png', 'star_gray.png'],
        ['star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gray.png', 'star_gray.png'],
        ['star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gray.png'],
        ['star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gold.png', 'star_gold.png'],
];

鼠标悬浮和离开星星触发的事件：

$(".stars").find("img").hover(function() { //星星悬浮触发
    var obj = $(this); //当前对象
    var star_area = obj.parent(".stars"); //当前父级.stars
    var star_area_index = star_area.index(); //当前父级.stars索引
    var index = obj.parent(".stars").find("img").index($(this)); //当前星星索引
    var left = obj.position().left;
    var top = obj.position().top + 25;
    var comment_title = data[star_area_index][index][0]; //标题
    var comment_description = data[star_area_index][index][1]; //描述
    $("#tip").css({
        "left": left,
        "top": top
    }).show().html(comment_title); //显示定位提示信息
    for (var i = 0; i < 5; i++) {
        star_area.find("img").eq(i).attr("src", "images/" + stars[index][i]); //切换每个星星
    }
    star_area.find(".comment_description").remove(); //星星右侧切换描述
    star_area.append("<span class='comment_description'>" + comment_title + "<span class='intro'>" + comment_description + "</span></span>");

},
function() { //鼠标离开星星
    $("#tip").hide(); //隐藏提示
    var obj = $(this); //当前对象
    var star_area = obj.parent(".stars"); //当前父级.stars
    var star_area_index = star_area.index(); //当前父级.stars索引
    var index = star_area.attr("data-default-index"); //点击后的索引
    if (index >= 0) { //若该行点击后的索引大于等于0，说明该行星星已被点击
        var comment_title = data[star_area_index][index][0]; //标题
        var comment_description = data[star_area_index][index][1]; //描述
        star_area.find(".comment_description").remove(); //显示切换描述
        star_area.append("<span class='comment_description'>" + comment_title + "<span class='intro'>" + comment_description + "</span></span>");
        for (var i = 0; i < 5; i++) {
            star_area.find("img").eq(i).attr("src", "images/" + stars[index][i]); //更新该行星星
        }
    } else {
        var obj = $(this);
        var star_area = obj.parent(".stars");
        star_area.find(".comment_description").remove();
        for (var i = 0; i < 5; i++) {
            star_area.find("img").eq(i).attr("src", "images/star_gray.png"); //更新该行星星都变初始状态
        }
    }
})

鼠标点击每颗星星触发的click事件：

$(".stars").find("img").click(function() { //当点击每颗星星
    var obj = $(this); //当前对象
    var star_area = obj.parent(".stars"); //当前父级.stars
    var star_area_index = star_area.index(); //当前父级.stars索引
    var index = obj.parent(".stars").find("img").index($(this)); //当前星星索引
    var comment_title = data[star_area_index][index][0]; //标题
    var comment_description = data[star_area_index][index][1]; //描述
    star_area.attr("data-default-index", index); //记录点击后的索引，用来鼠标移出星星后，获取之前点击后的星星索引
    star_area.find(".comment_description").remove(); //显示切换描述
    star_area.append("<span class='comment_description'>" + comment_title + "<span class='intro'>" + comment_description + "</span></span>");
})