jQuery 点击 星星评分 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
  .box{
    width:300px;
    height:40px;

  }
  li{
    height: 40px;
    width:40px;margin-right: 5px;
    border-radius: 50%;
    background: red;
    list-style: none;
    background-position: center;
    float: left;
    cursor: pointer;
  }
  #score{
    color:red;
    margin-top:20px;
  }
  .current{background: green;}
</style>
<body>
  <div class="box" id="star0" score="">
    <li ></li>
    <li ></li>
    <li></li>
    <li></li>
    <li></li>
  </div>
  <div id="score"></div>
  <script src="scripts/jquery-1.7.1.min.js"></script>
  <script type="text/javascript">

    $(".box li").click(function(){
     var index = $(this).index();
     $(this).parent().attr("score",index+1);
     var parentId = $(this).parent().attr("id");
     $("#"+parentId).find("li").css("background","red");
     for(var i=0;i<=index;i++){
      $("#"+parentId).find("li").eq(i).css("background","green");
    }
    var score = $("#"+parentId).attr("score");
    $("#score").text("您选择的分数是:"+score+"分");
  });

  </script>


</body>
</html>

 

posted @ 2017-10-26 17:05  拈花醉  阅读(347)  评论(0)    收藏  举报