说明:
本方法采用了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结构代码:
<h1>评价:</h1>
<ul id="star">