原生js多组星级评价-北京尧图网络

所需图片htmldiv classstarLevel ul classstars li classlight star1a hrefjavascript:;1/a/li li classstar1a hrefjavascript:;2/a/li li classstar1a hrefjavascript:;3/a/li li classstar1a hrefjavascript:;4/a/li li classstar1a hrefjavascript:;5/a/li /ul ul classstars li classlight star2a hrefjavascript:;1/a/li li classstar2a hrefjavascript:;2/a/li li classstar2a hrefjavascript:;3/a/li li classstar2a hrefjavascript:;4/a/li li classstar2a hrefjavascript:;5/a/li /ul ul classstars li classlight star3a hrefjavascript:;1/a/li li classstar3a hrefjavascript:;2/a/li li classstar3a hrefjavascript:;3/a/li li classstar3a hrefjavascript:;4/a/li li classstar3a hrefjavascript:;5/a/li /ul /divjs遗留问题无法用一个函数实现三组评分//打星星 var num1 finalNum1 tempNum1 0; var lis1 document.getElementsByClassName(star1); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow(num1) { finalNum1 num1 || tempNum1;//如果传入的num为0则finalNum取tempNum的值 for (var i 0; i lis1.length; i) { if(i finalNum1){ lis1[i].className light ; } else{ lis1[i].className star1; }//点亮星星就是加class为light的样式 } } for (var i 1; i lis1.length; i) { lis1[i - 1].index i; lis1[i - 1].onmouseover function() { //鼠标经过点亮星星。 fnShow(this.index);//传入的值为正就是finalNum } lis1[i - 1].onmouseout function() { //鼠标离开时星星变暗 fnShow(0);//传入值为0finalNum为tempNum,初始为0 } lis1[i - 1].onclick function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum1 this.index; } } var num2 finalNum2 tempNum2 0; var lis2 document.getElementsByClassName(star2); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow2(num2) { finalNum2 num2 || tempNum2;//如果传入的num为0则finalNum取tempNum的值 for (var i 0; i lis2.length; i) { if(i finalNum2){ lis2[i].className light ; } else{ lis2[i].className star2; }//点亮星星就是加class为light的样式 } } for (var i 1; i lis2.length; i) { lis2[i - 1].index i; lis2[i - 1].onmouseover function() { //鼠标经过点亮星星。 fnShow2(this.index);//传入的值为正就是finalNum } lis2[i - 1].onmouseout function() { //鼠标离开时星星变暗 fnShow2(0);//传入值为0finalNum为tempNum,初始为0 } lis2[i - 1].onclick function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum2 this.index; } } var num3 finalNum3 tempNum3 0; var lis3 document.getElementsByClassName(star3); //num:传入点亮星星的个数 //finalNum:最终点亮星星的个数 //tempNum:一个中间值 function fnShow3(num3) { finalNum3 num3 || tempNum3;//如果传入的num为0则finalNum取tempNum的值 for (var i 0; i lis3.length; i) { if(i finalNum3){ lis3[i].className light ; } else{ lis3[i].className star3; }//点亮星星就是加class为light的样式 } } for (var i 1; i lis3.length; i) { lis3[i - 1].index i; lis3[i - 1].onmouseover function() { //鼠标经过点亮星星。 fnShow3(this.index);//传入的值为正就是finalNum } lis3[i - 1].onmouseout function() { //鼠标离开时星星变暗 fnShow3(0);//传入值为0finalNum为tempNum,初始为0 } lis3[i - 1].onclick function() { //鼠标点击,同时会调用onmouseout,改变tempnum值点亮星星 tempNum3 this.index; } } }

原生js多组星级评价

相关推荐

Markdown编辑器使用说明

内存管理总结

从细胞类型到细胞状态：超多重免疫荧光如何让组织微环境分型更可解释？

更多资讯

llvm-project核心解析：掌握IR与Pass，构建自定义编译器生态

IsaacLab 安装总卡在 rsl-rl？3 种做法一步修好

Obsidian 多端同步方案对比：从 WebDAV 到 Syncthing 的选型指南

Artificial Analysis 价目表：GLM 5.3 Flash 用 TaoToken 同一把 Key 核对

ADMM算法解析：分布式凸优化问题的核心解法

LLaVA 在 Windows 上的安装与 16 位推理实战指南

今日更新

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？