首页 > 其他 > 详细

评价部分中星级评价简单的实现

时间:2015-09-23 13:14:49      阅读:145      评论:0      收藏:0      [点我收藏+]

说明:主要是想总结一下jquery中的知识,这个例子中用到的主要是jquery中prevall()方法和nextAll()方法进行元素集合的遍历

jquery部分
 $(function(){
    $(".star01 li").addClass("xing_nomarl");
    $(".star01 li").click(function(){
        $(".star01 li").addClass("xing_nomarl");
        $(this).addClass("xing_select");
        $(this).prevAll().addClass("xing_select");
        $(this).nextAll().removeClass("xing_select").addClass("xing_nomarl");
        var star_number = $(this).prevAll().length+1;
        //alert(star_number);
    })
});
 
 html部分
 <ul class="star">
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

css部分
.star{
    display:inline-block;
    padding-left:0;
    margin-bottom: -5px;
    }
.star li{
    position:relative;
    padding-left:10px;
    float:left;
    cursor:pointer;
}
.xing_nomarl{
    width:18px;
    height:18px;
    display:block;
    margin:0 5px;
    background:url(xingxing_nomarl.png) no-repeat left center;
    background-size:100%;
    overflow:hidden;
    }
.xing_select{
    width:18px;
    height:18px;
    display:block;
    margin:0 5px;
    background:url(xingxing_select.png) no-repeat left center;
    background-size:100%;
    overflow:hidden;
    }

评价部分中星级评价简单的实现

原文:http://www.cnblogs.com/wjh0916/p/4831838.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!