JQ实现星星评价(带半星)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a610616898/article/details/76269797

JQ实现星星评价效果

今天要写一个评价功能,然后想了一下,把代码记录下来吧

需要用到的图片
半星这里写图片描述这里写图片描述

css代码

ul {
   padding-left: 0;
   overflow: hidden;
}
ul li {
   float: left;
   list-style: none;
   width: 20px;
   height: 20px;
}
ul li a {
   display: inline-block;
   padding-top:20px;
   width: 50%;
   overflow: hidden;
}
.halfStar{
   background: url(/images/center/halfStar.png)
}
.fullStar{
   background: url(/images/center/fullStar.png)
}

这里css主要是为了让li能够横向排版,然后调整a标签的位置达到触发的效果

html代码

<div class="mark">
    <ul>
        <li class="emptyStar"><a href="javascript:;">1</a><a href="javascript:;">2</a></li>
        <li class="emptyStar"><a href="javascript:;">3</a><a href="javascript:;">4</a></li>
        <li class="emptyStar"><a href="javascript:;">5</a><a href="javascript:;">6</a></li>
        <li class="emptyStar"><a href="javascript:;">7</a><a href="javascript:;">8</a></li>
        <li class="emptyStar"><a href="javascript:;">9</a><a href="javascript:;">10</a></li>
    </ul>
</div>

这里,一个li中使用了两个a标签,是为了对半星和全星进行判断,然后可以根据a中的值来得知鼠标移动在哪个标签上,就能对li进行改变图标,这里改变的方式是修改class做到使用不同的背景图

js代码

    $(".mark ul li a").on("mouseover",function () {
        //判断是全星点还是半星点,修改当前标签的父标签li的class为对应的星星图像
        if(parseInt($(this).html()) %2 == 1){
            $(this).parent().attr("class","halfStar");
        }else{
            $(this).parent().attr("class","fullStar");
        }
        //对前方的星星进行处理,遍历前方的li使背景图均变为全星
        var prev = $(this).parent();
        for(var i = 0;i <= (parseInt($(this).html()) / 2) - 1;i++){
            prev.prev().attr("class","fullStar");
            prev = prev.prev();
        }
        //对后方星星进行处理,遍历后面的li使背景图均变为空星
        var after = $(this).parent();
        for(var i = 0; i<= (5 - parseInt($(this).html()) / 2) - 1;i++){
            after.next().attr("class","emptyStar");
            after = after.next();
        }
    })

就实现了一个简单的星星评价,然后不需要点击什么的,只要鼠标移动出去即可记录当前的星级,然后加个全局变量记录一下当前的等级即可

展开阅读全文

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