suchen

Heim >Web-Frontend >js-Tutorial >Erzielen Sie Fünf-Sterne-Lob basierend auf JQuery

Erzielen Sie Fünf-Sterne-Lob basierend auf JQuery

韦小宝
韦小宝Original
2018-01-16 11:12:311766Durchsuche

In diesem Artikel wird hauptsächlich detailliert beschrieben, wie man auf der Grundlage von jquery ein Fünf-Sterne-Lob erhält. Freunde, die sich für jquery interessieren, können sich auf diesen Artikel beziehen

Auf E-Commerce-Websites verwenden wir häufig die Fünf-Sterne-Bewertungsfunktion. Jetzt verwenden wir jQuery, um eine einfache Demo zu implementieren


<!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>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass es für alle nützlich sein wird. !

Verwandte Empfehlungen:

Javascript wandelt den absoluten Pfad des Bildes in Base64-Kodierung um

JavaScript implementiert die Funktion zum Umschalten von Bildseiten mit der Mausradsteuerung Beispiel

Javascript implementiert eine Fortschrittsbalkenfunktion, Beispiel basierend auf einem Timer

Das obige ist der detaillierte Inhalt vonErzielen Sie Fünf-Sterne-Lob basierend auf JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Komponentenfreigabe, die Vue-Remote-Code lädtNächster Artikel：Komponentenfreigabe, die Vue-Remote-Code lädt

In Verbindung stehende Artikel

Mehr sehen