*用jQuery实现星星好评wink*~

效果展示:

思路

一.首先在html中准备五颗空心的小星星

    <ul><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul>

二.给星星添加css样式

       body {font-family: "simsun";}ul {list-style: none;font-size: 44px;color: red;}li {cursor: pointer;float: left;}

三.给星星添加jQuery代码：
1.这里是是先给每颗星星绑定触摸事件。而当前触碰的星星给一个类名。该星星自己和前面的变为实心星星。后面的全部为空心星星

       $("li").on("mouseover", function() {$("li").removeClass("current");$(this).prevAll("li").text("★");$(this).text("★");$(this).nextAll("li").text("☆");});

2.给点击的星星添加绑定事件给一个类名

$("li").on("click", function() {$(this).addClass("current");});

ps:但是这个类名只有点击的星星可以有，所有在绑定触摸事件中想通过隐式迭代，删除类名，达到每次点击只有点击的星星拥有类名
3.当鼠标离开星星的时候，添加离开事件，检测li中是否有前面添加的类名。如果有，则该类名的星星以及前面的星星全是实星。若没有则鼠标离开时所有星星都是空心

         $("ul").on("mouseleave", function() {if ($(".current").length == 0) {$("li").text("☆");} else {$(".current").text("★");$(".current").prevAll("li").text("★");$(".current").nextAll("li").text("☆");}});

用jQuery实现星星好评wink~相关推荐

php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
html的星星评分效果,利用jQuery实现星星打分评分插件
特效描述:利用jQuery实现星星打分评分插件.利用jQuery实现星星打分评分插件代码结构 1. 引入JS 2. HTML代码 $("#star_grade").marki ...
php 识别图片五星好评,jquery实现五星好评方法
本文主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的d ...
php 识别图片五星好评,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...
jQuery 实现五星好评
直接上代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
jquery制作五星好评插件
效果展示: 直接上代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
jQuery实现星星评分功能
一.这是我做的调查问卷中的一个功能.(第三方MVC框架) 二.功能说明:1.用户点击星星,将值放到隐藏域中.2.用户可以重新点击星星修改回答. 前台JS代码: <script type=&quo ...

用jQuery实现星星好评wink~

用jQuery实现星星好评wink~相关推荐

最新文章

热门文章

*用jQuery实现星星好评wink*~

*用jQuery实现星星好评wink*~相关推荐

最新文章

热门文章

用jQuery实现星星好评wink~

用jQuery实现星星好评wink~相关推荐