如何基于jQuery实现五角星评分
更新时间:2020年09月02日 09:37:37 作者:山上一边边
这篇文章主要介绍了如何基于jQuery实现五角星评分,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底
2. 鼠标离开,comment的所有孩子变为空心五角星。额外,找到current, 让current和它的前面都是实心。
3. 点击li的时候,当前的位置增加个current的class, 其余位置移除current
代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五角星评分案例</title> <style> * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff16cf; } .comment li { float: left; } ul { list-style: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1. 给li注册鼠标经过事件,让自己和前面所有的兄弟都变成实心 var wjx_k = "☆"; var wjx_s = "★"; $(".comment > li").on("mouseenter", function () { $(this).text(wjx_s).prevAll().text(wjx_s); $(this).nextAll().text(wjx_k); }); //2. 给ul注册鼠标离开时间,让所有的li都变成空心 $(".comment").on("mouseleave", function () { //2. 给ul注册鼠标离开时间,让所有的li都变成空心 $(this).children().text(wjx_k); //再做一件事件,找到current,让current和current前面的变成实心就行。 $("li.current").text(wjx_s).prevAll().text(wjx_s); }); //3. 给li注册点击事件 $(".comment>li").on("click", function () { $(this).addClass("current").siblings().removeClass("current"); }); }); </script> </head> <body> <ul class="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery在vs2008及js文件中的无智能提示的解决方法
我通过下面方法实现了jQuery在VS2008及js文件中的智能提示的,希望对朋友们有所帮助。2010-12-12jquery autocomplete自动完成插件的的使用方法
最近刚开始学jquery,想实现类似GOOGLE搜索时自动显示出相关结果的效果。于是选择了使用jquery autocomplete插件。2010-08-08jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js,sharejs.com推荐的这个插件,可以自定义多种方式让网页背景自动切换,效果流畅,非常难得,调用代码也非常简单。2015-06-06
最新评论