suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery erstellt ein Bewertungssystem

jquery erstellt ein Bewertungssystem

php中世界最好的语言
php中世界最好的语言Original
2018-03-15 17:59:092518Durchsuche

Dieses Mal bringe ich Ihnen jquery zum Erstellen eines Bewertungssystems. Was sind die Vorsichtsmaßnahmen für jquery zum Erstellen eines Bewertungssystems?

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>

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie das gelesen haben Fall in diesem Artikel und mehr. Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Kann das DataTable-Plug-in asynchrones Laden implementieren?

Die API, die jQuery beherrschen muss

So implementieren Sie den Datei-Upload mit Fortschrittsbalkenanimation

jQuery implementiert die Formularüberprüfung nach der mehrschichtigen Überprüfung

Das obige ist der detaillierte Inhalt vonjquery erstellt ein Bewertungssystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Verwendung von Kontrollkästchen in jQueryNächster Artikel：Verwendung von Kontrollkästchen in jQuery

In Verbindung stehende Artikel

Mehr sehen