jquery erstellt ein Bewertungssystem-js-Tutorial-php.cn

jquery erstellt ein Bewertungssystem

php中世界最好的语言

Freigeben： 2018-03-15 17:59:09

Original

2471 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!