最近寫了一個購物網站的星級評價,,,本以為很快寫完,在寫的過程中的,有點被這個邏輯搞混了;

效果圖

這里的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代碼部分