问答详情
源自:3-2 最基本的JS写法--JS的第一次尝试

问题已经解决,粗心造成的错误

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Star rating 1</title>


  <style type="text/css">

  body,ul,li{

   padding: 0;

   margin: 0;

  }

  li{

   list-style-type: none;

  }

  .rating{

        width: 165px;

        height: 40px;

        margin: 100px auto;

        overflow: hidden;

  }

  .rating-item{

   float:left;

   width: 33px;

   height: 33px;

   background: url(img/star.png) no-repeat;

   cursor:pointer;

  }

  </style>


</head>

<body>

<!--The First way-->


<ul class="rating" id="rating">

        <li class="rating-item" title="很不好"></li>

        <li class="rating-item" title="不好"></li>

        <li class="rating-item" title="一般"></li>

        <li class="rating-item" title="好"></li>

        <li class="rating-item" title="很好"></li>

    </ul>



    <script

  src="https://code.jquery.com/jquery-1.11.3.min.js"

  integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="

  crossorigin="anonymous"></script>


  <script type="text/javascript">

  var num = 2,

  $item = $('#rating').find('.rating-item');


  var lightOn = function(num){

 

     $item.each(function(index){

    

   if(index < num){

   $(this).css('background-position', '0 -68px');

   }else{

   $(this).css('background-position','0 0');

   }

  });

  };

  

lightOn(num);


$item.on('mouseover',function() {

lightOn($(this).index()+1);

}).on('click', function() {

num=$(this).index()+1;

/* Act on the event */

});


$('#rating').on('mouseout',function() {

lightOn(num);


});



  </script>

</body>

</html>


提问者:慕用1312185 2018-02-24 19:08

个回答

  • 龙跃马
    2019-01-04 22:46:59

    这个jq库可以用,下载的没效果

  • 阿阿影
    2018-04-16 15:58:47

    什么问题?怎么解决的?