suchen

Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die Implementierung einer jquery-Funktion ähnlich der Taobao-Sternebewertung_jquery

Beispiel für die Implementierung einer jquery-Funktion ähnlich der Taobao-Sternebewertung_jquery

WBOY
WBOYOriginal
2016-05-16 16:36:201281Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jquery eine Taobao-Sternebewertungsfunktion implementiert und wird Ihnen als Referenz zur Verfügung gestellt. Die spezifische Methode ist wie folgt:

Der HTML-Teil des Codes lautet wie folgt: 

<body>
  <div id="div">
    <ul>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
      <li>☆</li>
    </ul>
  </div>
  <p id="p"></p>
  <p id="score"></p>
</body>

Im obigen Code:

id="p"Echtzeitpunktzahl anzeigen

id="score" zeigt das Endergebnis an

Der Javascript-Code lautet wie folgt: 

<script type="text/javascript">
$(function () {
  //为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件
  $("#div li").bind({
 mouseout:function () {
   $(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
 },
 mouseover: function () {
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
 }
  });
  //=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
   $("#div li").mouseover(function () {
   $("#p").html(parseInt( $(this).index("#div li"))+1);
 });
  //鼠标按下时，确定分数。额，就不更改了，大局已定。
 $("#div li").mousedown(function () {
   $("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
   $(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
   //全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
   $(this).unbind().prevAll().unbind().nextAll().unbind();
 });
  })
</script>

Ich hoffe, dass dieser Artikel für alle bei der jQuery-WEB-Programmierung hilfreich sein wird

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：Eine Methode zum Übergeben von Konfigurationsparametern über benutzerdefinierte Skriptattribute_Javascript-FähigkeitenNächster Artikel：Eine Methode zum Übergeben von Konfigurationsparametern über benutzerdefinierte Skriptattribute_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen