So erreichen Sie mit jquery ein Fünf-Sterne-Lob-js-Tutorial-php.cn

So erreichen Sie mit jquery ein Fünf-Sterne-Lob

小云云

Freigeben： 2017-12-09 13:16:05

Original

3070 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich vor, wie man auf der Grundlage von Jquery ein Fünf-Sterne-Lob erhält. Ich hoffe, dass er jedem helfen kann.

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

Verwandte Empfehlungen:

jquery implementiert die gleitende Überprüfung auf dem PC

So verwenden Sie jQuery, um den Lupeneffekt zu erzielen

So verwenden Sie js und jquery, um ein unbegrenztes Laden von Seiten zu erreichen

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit jquery ein Fünf-Sterne-Lob. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!