Comment obtenir des éloges cinq étoiles avec jquery-js tutoriel-php.cn

Comment obtenir des éloges cinq étoiles avec jquery

小云云

Libérer： 2017-12-19 17:03:01

original

1440 Les gens l'ont consulté

Sur les sites de commerce électronique, nous utilisons souvent la fonction d'évaluation cinq étoiles. Cet article présente principalement en détail comment obtenir des évaluations cinq étoiles basées sur jquery. Il a une certaine valeur de référence. j'espère que cela pourra aider tout le monde.

Utilisez maintenant jQuery pour implémenter une démo simple

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>五角星评分案例</title> 
  <style> 
    * { 
      padding: 0; 
      margin: 0; 
    } 
    .comment { 
      font-size: 40px; 
      color: teal; 
    } 
    .comment li { 
      float: left; 
    } 
    ul { 
      list-style: none; 
    } 
  </style> 
</head> 
<body> 
<ul class="comment"> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
  <li>☆</li> 
</ul> 
 
<script src="jquery-1.12.2.js"></script> 
<script> 
  $(function () { 
    var wjx_k = "☆"; 
    var wjx_s = "★"; 
    //prevAll获取元素前面的兄弟节点，nextAll获取元素后面的所有兄弟节点 
    //end 方法；返回上一层 
    //siblings 其它的兄弟节点 
    //绑定事件 
    $("li").on("mouseenter", function () { 
      $(this).html(wjx_s).prevAll().html(wjx_s).end().nextAll().html(wjx_k); 
    }).on("click", function () { 
      $(this).addClass("active").siblings().removeClass("active") 
    }); 
    $("ul").on("mouseleave", function () { 
      $("li").html(wjx_k); 
      $(".active").text(wjx_s).prevAll().text(wjx_s); 
    }) 
  }); 
</script> 
</body> 
</html>

Copier après la connexion

Recommandations associées :

javaScript et jQuery implémentent le chargement automatique

Exemple d'actualisation partielle JQuery ajax

jQuery exploite une case à cocher pour implémenter des exemples de sélection et de désélection multiples

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!