jQueryは「五つ星採点」を実現
1778 ワード
機能:マウスを上に置くと、この中空五星および前の中空五星はいずれも中空 に変更された.マウスはクリックしないで、マウスが離れる時実心の5つの星は中空の を回復しますマウスをクリックすると、ソリッド効果は のままになります.マウスが再び他の位置にぶら下がってクリックすると、効果は 更新されます.マウスが再びクリックしないと、効果はクリアされ、中空 に戻ります.
考え方:は、固体効果 を維持するためのグローバル変数を設計する.マウスのサスペンションでは、すべての星を巡り、サスペンションイベントが発生した星と、その星の前のすべての位置の星を実心 に変更します.マウスをクリックすると、グローバル変数を変更し、星の状態を変更し、変更方法は と同じです.マウスを移動すると、グローバル変数を判断し、要求を満たすと、効果をクリアし、中空を回復する.効果が満たされなければ、クリアせず、ソリッド状態を維持した後、グローバル変数 を初期化する.
コード:
考え方:
コード:
Title
// jQuery
☆
☆
☆
☆
☆
var flag=false;//
$("td").mouseover(function(e){// ,
var pres = e.target;
change(pres);
});
$("td").mouseout(function(e){// ,
var pres = e.target;
changeback(pres);
});
$("td").click(function(e){// , ,
var pres = e.target;
change(pres);
if(flag){
flag=false;
}else{
flag=true;
}
});
function change(pres){//
$("td").each(function(index,element){
if(index+1<=pres.id){
$(element).html("★");
}else {
$(element).html("☆");
}
flag=false;
});
}
function changeback(){//
if(!flag){
$("td").each(function(index,element){
$(element).html("☆");
});
}
}