博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS实现星级评价
阅读量:5162 次
发布时间:2019-06-13

本文共 834 字,大约阅读时间需要 2 分钟。

说明:

  本方法采用了Jquery库,暂时检测兼容IE8版本。本示例的2种颜色的星星都是放入了一张png图片当中,当然还有其他的一些实现思路。本示例展示的情况是当前页面只有一个星级评价的情况。

思路:

  通过对星级显示元素的,mouseenter,mouseout,click 三个事件的监听,从而星星显示的个数。其中我用了2个变量(temp_value,choice_value)来存放当前选定星级的值和当前临时的星级值;

  •    temp_value : 临时的星级值;
  •       choice_value : 选择的星级值;
  •    mouseenter : 鼠标移入,获取当前所在的星星级别赋予temp_value,调整当前星星的图片颜色;
  •     mouseout : 鼠标移除,通过对比choice_value值,重新调整星星图片颜色;
  •       click : 鼠标单击后,获取当前的星级值,赋值给choice_value;(注意在click前已经进行过mouseenter事件了,click后进行了mouseout事件了)
  •       当完成选定值后,在需要提交评价值的时候,可以通过JS去获取变量choice_value的值;

HTML结构代码:

评价:

注:如果页面中不止一个星级评价,也就是出现多行的情况,这个时候只需要对Dom中li的id进行一些改造,加上动态的下标,从而区分不同的元素。另外有个点就是,我把选定的星级值放入的是JS变量中去了,多个评价值的情况下,建议可以在Dom中加上隐藏表单域去存放选定的当前星级值。

JS实现代码:

    

如有问题,请联系我!这里是Demo地址:

转载于:https://www.cnblogs.com/zivxiaowei/p/3512483.html

你可能感兴趣的文章
Eclipse使用External Tools定位class文件目录路径
查看>>
JS节流和防抖
查看>>
C#教程之打印和打印预览
查看>>
linux下解压命令大全
查看>>
C语言开发面试题
查看>>
VC++读写文件
查看>>
小程序-冒泡事件
查看>>
myEclipse快捷键
查看>>
数据结构练习(36)二叉树两结点的最低共同父结点
查看>>
WCF编程系列(一)初识WCF
查看>>
python远程控制电脑
查看>>
android之实现底部TabHost
查看>>
解除与设置计算机锁定
查看>>
PAT A1110 Complete Binary Tree (25 分)——完全二叉树,字符串转数字
查看>>
OpenCV学习笔记-\doc\tutorials\core\basic_linear_transform
查看>>
安装 gradle
查看>>
只输入数字
查看>>
抽屉问题 吃糖果
查看>>
js常用的数组去重方法
查看>>
Setting up a Reverse Proxy using IIS, URL Rewrite and ARR
查看>>