jquery实现五星好评方法
程序员文章站
2022-04-01 13:01:36
...
本文主要为大家详细介绍了基于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实现五星好评方法的详细内容,更多请关注其它相关文章!
推荐阅读
-
jQuery简单实现根据日期计算星期几的方法
-
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
-
jQuery实现获取h1-h6标题元素值的方法
-
jQuery实现遍历复选框的方法示例
-
使用简洁的jQuery方法实现隔行换色功能
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
jQuery序列化form表单数据为JSON对象的实现方法
-
jQuery+Asp.Net实现省市二级联动功能的方法
-
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
-
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法