最近写了一个购物网站的星级评价,,,本以为很快写完,在写的过程中的,有点被这个逻辑搞混了;
效果图
这里的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代码部分
