【js每日一练】星级评分原理和实现

1、script放在</body>上面
2、jquery index()，获取到的索引值从0开始，如果未找到元素，index() 将返回 -1。
3、if(-1){}也会执行{}代码块内的代码，只有()内的代码为0才不会执行{}内的代码
所以，可根据index>0或者<0来区分

4、(function(){ //闭包，匿名函数只自行
//这里面的代码会立即自动执行，且变量和函数都是局部的
})()

5、jquery普通绑定事件和on委托事件
以click事件为例：
普通绑定事件：$('.btn1').click(function(){}绑定
on绑定事件：$(document).on('click','.btn2',function(){}绑定
①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件；
②而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。
on()委托事件的优点：原来的事件绑定，要绑定好多事件，现在只需要绑定一个事件，大大提高了效率和页面性能，解决的动态添加元素导致不能触发的bug。
事件委托：是指在事件绑定的基础上补充与扩展事件绑定，具体就是指：通过子节点元素绑定事件来传递给父元素DOM节点（祖先节点）来统一管理其全部后代子元素。这样遇到需要绑定很多事件的子元素时，就避免了很多麻烦重复绑定事件的工作，提供了访问效率。

6、代码：自己写的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>js每日一练之星星评分</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <style type="text/css">
            .star-list{
                width: 200px;
                margin: 50px auto;
            }
            .star-item{
                float: left;
                width: 19px;
                height: 19px;
                background:url(img/star.png) no-repeat 0 0;
                margin: 0 2px;
                cursor: pointer;
            }
            .star-item.on{
                background: url(img/star.png) no-repeat 0 -28px;
            }
        </style>
    </head>
    <body>

        <ul class="star-list clear">
            <li class="star-item" title="很差"></li>
            <li class="star-item" title="较差"></li>
            <li class="star-item" title="一般"></li>
            <li class="star-item" title="较好"></li>
            <li class="star-item" title="很好"></li>
        </ul>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">

            var starList = $(".star-list"),
                items = starList.find(".star-item");
                starNum = 2,
                originalNum  = starNum;

            var starLight = function(num){
                items.each(function(i,elem){
                    if(i<=num){
                        $(elem).addClass("on");
                    }else{
                        $(elem).removeClass("on");
                    }
                })
            }
            starLight(starNum);
            items.on("mouseover",function(){
                var index = $(this).index();
                starLight(index);
            }).on("mouseout",function(){
                starLight(originalNum);

            }).on("click",function(){
                var index = $(this).index();
                starLight(index);
                originalNum = index;
            })

        </script>
    </body>
</html>

改进版

<script type="text/javascript">
            var starList = $(".star-list"),
                items = starList.find(".star-item");
                starNum = 2;

            var starLight = function(num){
                items.each(function(i,elem){
                    if(i<=num){
                        $(elem).addClass("on");
                    }else{
                        $(elem).removeClass("on");
                    }
                })
            }
            starLight(starNum);
            items.on("mouseover",function(){
                var index = $(this).index();
                starLight(index);
            }).on("click",function(){
                starNum = $(this).index();
            })
            starList.on("mouseout",function(){
                starLight(starNum);
            })
        </script>

【js每日一练】星级评分原理和实现

猜你喜欢