Maison >interface Web >js tutoriel >Obtenez des éloges cinq étoiles basés sur jquery

Obtenez des éloges cinq étoiles basés sur jquery

韦小宝original: 2018-01-16 11:12:311771parcourir

Cet article présente principalement en détail comment obtenir des éloges cinq étoiles basés sur jquery. Il a certaines références et valeurs pour l'apprentissage de jquery. Les amis intéressés par jquery peuvent se référer à cet article

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>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela sera utile à tout le monde. L'apprentissage aide ! !

Recommandations associées :

Javascript convertit le chemin absolu de l'image en codage base64

JavaScript implémente la fonction de changement d'image de la page de contrôle de la molette de la souris exemple

javascript implémente un exemple de fonction de barre de progression basé sur la minuterie

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!

JavaScript jquery

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：Partage de composants qui charge le code distant de vueArticle suivant：Partage de composants qui charge le code distant de vue

Articles Liés

Voir plus