Heim > Artikel > Web-Frontend > So erreichen Sie mit jquery ein Fünf-Sterne-Lob
So erreichen Sie mit jquery ein Fünf-Sterne-Lob
- 小云云Original
- 2017-12-09 13:16:053038Durchsuche
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> 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!