suchen

Heim  >  Artikel  >  Web-Frontend  >  jquery implementiert mit „screenshots_jquery' eine Funktion ähnlich der Taobao-Sternebewertung

jquery implementiert mit „screenshots_jquery' eine Funktion ähnlich der Taobao-Sternebewertung

WBOY
WBOYOriginal
2016-05-16 16:36:231512Durchsuche

html

<body>
<div id="div">
<ul>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</div>
<p id="p"></p>
<p id="score"></p>
</body>

id="p"Echtzeitpunktzahl anzeigen

id="score" zeigt das Endergebnis an-------------------------------------- ------- -------

Javascript“ 

$(function () {

//为所有的li标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件
$("#div li").bind({
mouseout:function () {
$(this).css("color", "black").html("☆").prevAll().css("color", "black").html("☆")
},
mouseover: function () {
$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
}
});
//=实时显示分数.【index】搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
$("#div li").mouseover(function () {
$("#p").html(parseInt( $(this).index("#div li"))+1);
});
//鼠标按下时，确定分数。额，就不更改了，大局已定。
$("#div li").mousedown(function () {
$("#score").html(("你选择的分数是" + (parseInt($(this).index("#div li")) + 1)));
$(this).css("color", "red").html("★").prevAll().css("color", "red").html("★")
//全部li标签的绑定事件全部清除--unbind方法可以加参数清除特定的事件。不加全部清除
$(this).unbind().prevAll().unbind().nextAll().unbind();
});
})

Der Effekt wird wie folgt sein:

Sobald Sie darauf klicken, kann es leider nicht mehr geändert werden. Es ist wirklich traurig. Es war wahrscheinlich nur eine kleine Show.

PrevAll() und nextAll() diese beiden Methoden? Lassen Sie uns zunächst über die Methode sprechen. Es kann in der JQuery-Dokumentation gefunden werden.

index in jquery gibt den Indexwert des Elements zurück, beginnend bei Null. Addiere 1 zur Punktzahl,

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Eine String-Umkehrfunktion kann String-Reverse-Order-Javascript-Fähigkeiten erlangenNächster Artikel：Eine String-Umkehrfunktion kann String-Reverse-Order-Javascript-Fähigkeiten erlangen

In Verbindung stehende Artikel

Mehr sehen