Maison > Article > interface Web > jquery crée un système de notation

jquery crée un système de notation

php中世界最好的语言original: 2018-03-15 17:59:092506parcourir

Cette fois, je vais vous proposer jquery pour créer un système de notation. Quelles sont les précautions pour que jquery crée un système de notation Voici un cas pratique, jetons un coup d'oeil.

Dans les sites Web de commerce électronique, nous utilisons souvent la fonction d'évaluation cinq étoiles. Nous utilisons 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>

Je pense que vous maîtrisez la méthode après avoir lu le. cas dans cet article, et plus encore Comme c'est excitant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Le plug-in DataTable peut-il implémenter un chargement asynchrone ?

L'API que jQuery doit maîtriser

Comment implémenter le téléchargement de fichiers avec animation de barre de progression

jQuery implémente la vérification de formulaire après une vérification multicouche

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：Utilisation de la case à cocher dans jQueryArticle suivant：Utilisation de la case à cocher dans jQuery

Articles Liés

Voir plus