jquery 商品评论 星星点击 事件

Posted 2022-12-14 Technofiend

五角星可以在iconfont.cn上面找， 名字分别为：
五角星（满）、五角星（空）

 代表空星星
 代表实心星星

html 代码

<div class="start_box">
    <i class="iconfont">&#xe623;</i>
    <i class="iconfont">&#xe623;</i>
    <i class="iconfont">&#xe623;</i>
    <i class="iconfont">&#xe623;</i>
    <i class="iconfont">&#xe623;</i>
</div>

jquery 代码

        $(".start_box .iconfont").click(function() 
            var parent  = $(this).parent();
            var tindex  = $(this).index();

            // 查找上次最后一颗实心星星的位置
            var lastStartPosition = 0;
            var iconfont          = parent.find('.iconfont');
            for (var i = iconfont.length - 1; i >= 0; i--) 
                if (iconfont.eq(i).html() == "") 
                    lastStartPosition = i;
                    break;
                
            

            // 如果上次最后一颗实心星在第一位，并且这次点击的星星是第一颗，并且点击星星是实心的。那么全部重置为空心星星。
            // $(this).html() == "" 可能那个五角星看不到，可以试试console.log($(this).html());
            if (lastStartPosition == 0 && tindex == 0 && $(this).html() == "") 
                tindex = -1;
            

            // 负责设置
            parent.find('.iconfont').each(function(index, el) 
                if (index <= tindex) 
                    $(this).html('&#xe60f;');
                 else 
                    $(this).html('&#xe623;');
                
            );
        );