jQuery 实现五星好评

直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 清楚ul和li的默认样式并让文本居中 */ul { padding: 200px 0;margin: 0;list-style: none;text-align: center;}/* 将li设为行内块并修改颜色  字体大小  鼠标样式 */li {display: inline-block;color: red;font-size: 30px;cursor: pointer;}</style><!-- 引入jquery文件 --><script src="./jquery.min.js"></script><script>$(function() {//用于储存鼠标点击事件星星对应的索引 var xing; function fn(num) { //用于计算星星应为实心还是空心的函数//遍历所有星星$('li').each(function(index, ele) { //用接收来的变量和当前的索引做对比  大于或等于索引星星为实心  小于则为空心$(ele).html(num >= index ? "★" : "☆"); })}//给所有星星添加hover事件$("li").hover(function() { //鼠标经过时将当前星星的索引储存到变量var num = $(this).index(); //将变量传递给函数fn(num); }, function() { //鼠标离开事件//将变量传递给函数  此举是为了让鼠标离开后星星的样式和上次点击之后的样式保持一致fn(xing); })// 给所有星星添加点击事件$("li").click(function() { //将点击的星星所对应的索引赋予变量xing = $(this).index();//将变量传递给函数fn(xing);})    })</script>
</head>
<body><ul><li>☆</li><li>☆</li><li>☆</li><li>☆</li><li>☆</li></ul>
</body>
</html>

jQuery 实现五星好评相关推荐

php+js 五星评价,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
php 识别图片五星好评,jquery实现五星好评方法
本文主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的d ...
php 识别图片五星好评,基于jquery实现五星好评
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考和学习jquery的价值,对jquery感兴趣的小伙伴们可以参考一下本篇文章在电商网站,我们经常会用到五星评分的功能,现在用j ...
使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
如何用jQuery实现五星好评
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了. 接下 ...
jQuery实现五星好评
简单实现五星评价 html代码: <div class="box"><ul><li><span class="star1&quo ...
jquery制作五星好评插件
效果展示: 直接上代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...
JS与JQuery分别实现淘宝（五星好评特效）
我们经常用的五星好评是如何来的,主要就是三个Event 中的三个事件分别: onmouseover 指向事件 onmouseout 离开事件 onclick 点击事件代码展示: <!D ...
jQuery五星好评界面反馈界面
星星: jQuery五星好评界面反馈界面 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...

jQuery 实现五星好评

直接上代码

jQuery 实现五星好评相关推荐

最新文章

热门文章