购物网站的星级评价

最近写了一个购物网站的星级评价,,,本以为很快写完,在写的过程中的,有点被这个逻辑搞混了;

效果图

这里的body里面就只是一个ul 和li标签,五角星是用搜狗输入法直接打出来的,这点我觉得搜狗确实很强大...主要是js部分的逻辑,,直接上代码分析;

$(function() {

varwjx_none ='☆',

wjx_sel  ='★';

$(".commentli").mouseenter(function() {

//给当前元素前面所有元素变成实心的五角星(包括自己),并且后面元素变为空心的五角星

$(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);

}).click(function() {

给当前的元素增加class.去除其他元素的class

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

});

$(".commentli").mouseleave(function() {

//这个一定要加上,要不然会有bug ,把所有元素先清空,就是变成空心的早操作..这是一个坑,之前没加这个,总是有bug,感觉代码写的也没错...

$(".comment li").text(wjx_none);//先给所有五角星都变空心

//给你点击的元素前面变成实心,后面变成空心的...

$(".click").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);

});

})

demo代码部分