html点击五角星评分,如何基于jQuery实现五角星评分

1. 鼠标经过li的时候，当前的位置是实心五角星，前面的是实心。当前位置后面的是空心。注意此处不能完全用链式编程写到底

2. 鼠标离开，comment的所有孩子变为空心五角星。额外，找到current, 让current和它的前面都是实心。

3. 点击li的时候，当前的位置增加个current的class, 其余位置移除current

代码如下

五角星评分案例

* {

padding: 0;

margin: 0;

}

.comment {

font-size: 40px;

color: #ff16cf;

}

.comment li {

float: left;

}

ul {

list-style: none;

}

$(function () {

//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心

var wjx_k = "☆";

var wjx_s = "★";

$(".comment > li").on("mouseenter", function () {

$(this).text(wjx_s).prevAll().text(wjx_s);

$(this).nextAll().text(wjx_k);

});

//2. 给ul注册鼠标离开时间，让所有的li都变成空心

$(".comment").on("mouseleave", function () {

//2. 给ul注册鼠标离开时间，让所有的li都变成空心

$(this).children().text(wjx_k);

//再做一件事件，找到current，让current和current前面的变成实心就行。

$("li.current").text(wjx_s).prevAll().text(wjx_s);

});

//3. 给li注册点击事件

$(".comment>li").on("click", function () {

$(this).addClass("current").siblings().removeClass("current");

});

});

• ☆
• ☆
• ☆
• ☆
• ☆

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。