jQuery实现的五星评论功能[案例]

本文举例说明了jQuery实现的五星评论功能。分享给大家参考，如下：

渲染：

需求分析：

1.将鼠标移动到li标签中，当前li标签和上一个li标签将全部变为实心；2.当鼠标移开时，所有li标签都变成空心的；3.用鼠标点击li标签，当前li标签和上一个li标签将全部变为实心

Jq代码实现过程：

var shiXin=Varkongxin='' $ ('li ')。On('鼠标回车'，function(){//1:鼠标移入后，当前li标签和前面li标签显示为实心，后面Li标签显示为空心$ (this)。文字(运气)。普雷瓦尔()。文字(运气)})。on('mouseleave '，function () { $('li '))。文字(孔欣)；//找到索引li，设置solid $ ('li [index=' dianji']')。正文(石鑫)。普雷瓦尔()。文(石鑫)为今李及其前李；}).on('click '，function () {//向被单击的li添加索引，并移除索引$ (this)。attr ('index '，' dianji ')。兄弟姐妹()。removeattr ('index')})。完整的代码如下：

！doctype html lang=' en ' head meta charset=' utf-8 ' titlewww.jb51.net jquery五星评论/title style * { margin 3360 0；padd : 0；} ul { list-style : none } Li { float : left；cursor:指针；颜色：红色；font-size : 40px；}/style/head dyyul Li/Li Li/Li Li/Li Li/ul script src=' http :http://libs . Baidu.com/jquery/2 . 0 . 0/jquery . min . js '/script script $(function(){/* I . 2。当鼠标移开时，所有li标签都变成空心的；3.用鼠标点击li标签，当前li标签和上一个li标签都变成了实体二：思路分析1。获取元素2。注册事件3。事件处理*//* var shiXin=' '；var kongXin=$ ('li ')。On('鼠标回车'，函数(){//1。当鼠标移动到li标签中时，当前li标签和上一个Li标签都变成实心的，后面的五角星变成空心的(这一步一定是，否则前进时会有bug。)$(这个)。正文(石鑫)。普雷瓦尔()。正文(石鑫)。end()。nextall()。text (kongxin)//end()方法是返回前一状态的返回值})。on ('mouseleve '，函数()。$('li ')。文字(孔欣)；$ ('li[index='dianji']')。正文(师信)。普雷瓦尔()。文字(师信)；//} ).on('click '，function () {//3。当鼠标点击li标签时，当前li标签和上一个li标签都变成实心的。//添加索引$ (this)。attr ('index '，' dianji ')。兄弟姐妹()。removeattr ('index ')到被点击的Li })*///第二次： var shiXin=Varkongxin='' $ ('li ')。On('鼠标回车'，function(){//1:鼠标移入后，当前li标签和前面li标签显示为实心，后面Li标签显示为空心$ (this)。文字(运气)。普雷瓦尔()。文字(运气)})。on('mouseleave '，function () { $('li '))。文字(孔欣)；//找到索引li，设置solid $ ('li [index=' dianji']')。正文(石鑫)。普雷瓦尔()。文(石鑫)为今李及其前李；}).on('click '，function () {//向被单击的li添加索引，并移除index $(this)。attr('index '，Dianji ')。兄弟姐妹()。remove attr(' index ')})})/script/body/HTMl更多对jQuery感兴趣的读者，请查看本网站主题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》和《jQuery扩展技巧总结》。

希望本文对大家的jQuery程序设计有所帮助。