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>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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
