jquery实现动态五角星评分

先上代码，最后附属上我的实现思路，新手做的bug多，大牛勿喷：请看代码：

☆☆☆☆☆

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title>//此处是引入jQuery的环境，可以去网上直接下载，也可以直接私信我，我给你 <script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){//给每个span加事件$("#pinfeng span").click(function(){$(this).text("★");//当前点击的元素$(this).siblings().text("★");//当前点击元素的兄弟元素$(this).nextAll().text("☆");//之后的兄弟元素空心})})</script><style type="text/css">#pinfeng span{cursor: pointer;}</style>
</head>
<body><div id="pinfeng"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
</body>
</html>

实现思路：先获取点击的五角星，设当前点击的五角星为实心的，然后调用siblings()方法，设所有的同辈五角星都为实心的，最后再把他之后的所有兄弟（同辈）元素设为空心的，就这样，一个动态评分效果就出来了欢迎大家的点评，也希望

和大家多多交流！！！

感兴趣的可以自己设置CSS样式，效果会更好点！

转载于:https://www.cnblogs.com/a1111/p/6540414.html

jquery实现动态五角星评分相关推荐

jQuery实现仿五角星评分案例
jQuery实现仿五角星评分案例这两周一直在做网页相关的,最近由于项目需求,又要重新捡起遗失已久的前端了(什么前端不前端,身为一颗螺丝钉,哪里需要往哪打). 重拾jQuery的第一感受,这玩 ...
html 评分五角星的插件,jquery五角星评分插件示例分享
jQuery五角星评分插件 #rating_cont { background: #1E1D1C url(images/rating_background.jpg) top left no-repea ...
html点击五角星评分,如何基于jQuery实现五角星评分
1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心.当前位置后面的是空心.注意此处不能完全用链式编程写到底 2. 鼠标离开,comment的所有孩子变为空心五角星.额外,找到current ...
纯CSS实现网站常用的五角星评分和分数展示交互效果
最近做的一个项目涉及到评分和展示分数的模块,UI设计师也给了几个切好的图片,实现五角星评分方式很多,本质爱折腾的精神和对性能追求以及便于维护的考虑,搜集和尝试了很多方式,最终采用了纯css驱动的实现方 ...
JAVA做一个五星评论打分字体,css简单实现五角星评分、点赞收藏、展现评分（半颗星、1/3颗星）...
1.前言javascript 以前作的好几个项目中,都会遇到打分,评分,点赞这样的需求,写了不少次,每次须要再写的时候,就会翻出以前写过的代码,而后copy过来.总以为这样的话没有进步,没有把知识放进 ...
NeurIPS 2021 | 通过动态图评分匹配预测分子构象
从 2D 分子图中预测稳定的 3D 构象一直是计算化学中的一个长期挑战.而最近,机器学习方法取得了相比传统的实验和基于物理的模拟方法更优异的成绩.这些方法主要侧重于模拟分子图上相邻原子之间的局部相互作 ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
JQuery实现动态插入HTML模块
JQuery实现动态插入HTML模块在项目中经常会遇到需要动态生成某个模块并将其插入到原有的HTML页面中,那么我就将我所知道的方法总结如下: 选择器选择的都是父级,添加到父级里 append:$( ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...

jquery实现动态五角星评分

jquery实现动态五角星评分相关推荐

最新文章

热门文章