jquery实现五星好评方法

来源：动视网责编：小OO 时间：2020-11-27 20:10:22

jquery实现五星好评方法

在电商网站，我们经常会用到五星评分的功能，现在用jQuery实现一个简单的demo。<。<。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>；<。

推荐度：

点击下载本文 文档为doc格式

导读在电商网站，我们经常会用到五星评分的功能，现在用jQuery实现一个简单的demo。<。<。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>；<。

本文主要为大家详细介绍了基于jquery实现五星好评，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

在电商网站，我们经常会用到五星评分的功能，现在用jQuery实现一个简单的demo

<!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>

jquery实现五星好评方法

推荐度：

点击下载本文 文档为doc格式

标签：方法五星五星好评

热门焦点

jquery实现五星好评方法

jquery实现五星好评方法

jquery实现五星好评方法

最新推荐

猜你喜欢

热门推荐