jquery+iconfont实现星星评分功能

此处使用了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>
展开阅读全文

没有更多推荐了,返回首页