jquery implementiert mit „screenshots_jquery' eine Funktion ähnlich der Taobao-Sternebewertung-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:36:23

Original

1518 Leute haben es durchsucht

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>

Nach dem Login kopieren

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();
});
})

Nach dem Login kopieren

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,