Maison > Article > interface Web > Explication détaillée de JavaScript pour implémenter la fonction d'évaluation du niveau étoile

Explication détaillée de JavaScript pour implémenter la fonction d'évaluation du niveau étoile

黄舟original: 2017-03-22 14:28:241460parcourir

Cet article présente principalement en détail l'implémentation JavaScript de la fonction de classement par étoiles, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article s'adressent à tout le monde. Le code spécifique pour l'évaluation du classement par étoiles js est partagé pour votre référence. Le contenu spécifique est le suivant

Rendu :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .container{
      float:left;
    }
    .score{
      float: left;
      position: relative;
      width: 100px;
      margin-top: 5px;
      margin-left: 10px;
    }
    span{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
    }
    .scoreDisplay{
      display: block;
    }
  </style>
  <script src="jquery-1.12.2.min.js"></script>
</head>
<body>
<!--  一个容器里面放5张图片,先所有的都空星图片-->
<!--  该案例的要点就是在于鼠标移动上去时改变图片的src-->
<p class="container">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
  <img src=".idea/empty.png" alt="">
</p>
<p class="score">
  <span>很差</span>
  <span>较差</span>
  <span>一般</span>
  <span>较好</span>
  <span>很好</span>
</p>
<script>
  var img = $(".container img");//获取5张图片的集合
  var span = $(".score span");
  var i,j,k;//定义变量i,j,k
  k = -1;//k给予一个初始值-1,,不然后面第1个星星始终是被点亮的
  img.mouseenter(function(){ //设置鼠标进入时的效果,首先将所有的星星熄灭,然后再根据用户鼠标进入的星星下标值点亮星星
    span.removeClass("scoreDisplay");//鼠标进入时，将右边的评论清除掉
    img.attr("src",".idea/empty.png");
    i = img.index(this);
    for(j=0;j<=i;j++)
    {
      img.eq(j).attr("src",".idea/shining.png");
    }
    span.eq(i).addClass("scoreDisplay");//根据用户进入的i值来显示评论
  }).mouseleave(function(){  //仍然是将所有的星星熄灭,然后根据k值来点亮星星
    span.removeClass("scoreDisplay");//鼠标离开时，首先清除掉评论
    img.attr("src",".idea/empty.png");//接下来将所有星星变为空星
    for(j=0;j<=k;j++)//根据最终值k值来确定点亮几颗星星
    {
      img.eq(j).attr("src",".idea/shining.png");
    }
    if(k==-1)//如果k值=-1,则不显示任何一个评论内容
    {
      span.removeClass("scoreDisplay");
    }
    else{
      span.eq(k).addClass("scoreDisplay");//根据最终值k值显示评论
    }
  });
  $("img").click(function(){ //k记录用户点击鼠标时的星星下标值
    k = img.index(this);
  })
</script>
</body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de code Javascript pour obtenir un effet de défilement transparent de plusieurs images vers la gauche et la droiteArticle suivant：Exemple de code Javascript pour obtenir un effet de défilement transparent de plusieurs images vers la gauche et la droite

Articles Liés

Voir plus