在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的演示
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>五角星评分案例& lt;/title>
& lt; style>
* {
填充:0;
保证金:0;
}
.comment {
字体大小:40像素;
颜色:蓝绿色;
}
李.comment {
浮:左;
}
ul {
list-style:没有;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; ul类="评论"比;
& lt; li>☆& lt;/li>
& lt; li>☆& lt;/li>
& lt; li>☆& lt;/li>
& lt; li>☆& lt;/li>
& lt; li>☆& lt;/li>
& lt;/ul>
& lt;脚本src=" https://www.yisu.com/zixun/jquery-1.12.2.js "祝辞& lt;/script>
& lt; script>
$(函数(){
var wjx_k=啊睢?
var wjx_s=啊铩?//prevAll获取元素前面的兄弟节点,nextAll获取元素后面的所有兄弟节点//结束方法;返回上一层//兄弟姐妹其它的兄弟节点//绑定事件
$("李")。(“mouseenter”功能(){
$ (). html (wjx_s) .prevAll () . html (wjx_s)指标()最终.nextAll () . html (wjx_k);
})。(“点击”,函数(){
(美元).addClass(“活跃的”).siblings () .removeClass(“活跃”)
});
$ (“ul”)。(“mouseleave”功能(){
$("李"). html (wjx_k);
$ (“.active”)。text (wjx_s) .prevAll ()。text (wjx_s);
})
});
& lt;/script>
& lt;/body>
& lt;/html>之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
