jquery+iconfont实现星星评分功能

最新推荐文章于 2024-07-10 03:42:08 发布

东方雨林_Lin

最新推荐文章于 2024-07-10 03:42:08 发布

阅读量1.3k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_24811915/article/details/81777242

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此处使用了confront的图标，用.js_star类名来触发click（）事件。.inconfont-coor为confront图标赋予了颜色（黄色），每次点击星星时第一次js循环会把所有星星的颜色都去掉，然后第二次循环会再次将颜色赋值给点到的那个星星以及它前面所有的星星。

/*HTML代码*/
<div class="js_star">
    <i class="iconfont icon-xingxing_selected i"></i>
    <i class="iconfont icon-xingxing_selected i"></i>
    <i class="iconfont icon-xingxing_selected i"></i>
    <i class="iconfont icon-xingxing_selected i"></i>
    <i class="iconfont icon-xingxing_selected i"></i>
</div>

<script>

    $(".js_star i").click(function() {
        var num = $(this).index();
        var elements = document.getElementsByClassName('iconfont icon-xingxing_selected i');
        // console.log(elements);
        for (var i = 0; i < 5; i++) {
            var dom = elements[i];
            $(dom).removeClass("iconfont-color1");
        }
        for (var i = 0; i < elements.length; i++) {
            if (i <= num) {
                var dom = elements[i];
                $(dom).addClass("iconfont-color1");
            }
        }

    })


</script>