דירוג כוכבים ב jQuery.

[CSS]

דירוג כוכבים ב jQuery.
במדריך הזה נלמד איך לעשות את הדירוג של הכוכבים, שכאשר עוברים על כוכב, אז כל הכוכבים לפני נצבעים גם.
נתחיל ביצירת הכוכבים.
לצורך הדוגמא אני אשתמש בעיגולים ולא בכוכבים, כדי לא ליצור בילבולים.
ניצור דיב עם class="stars", שבתוכו יהיו דיבים ריקים, שכל דיב מציין כוכב.

<div class="stars">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

ניתן להבין מפה שיהיו 5 כוכבים.

עכשיו נעשה להם רקע אפור, נגדיר להם אורך ורוחב, נעגל להם את הפינות (להפוך אותם לעיגול), נעשה מרווח בינהם ונעשה את כולם בצד שמאל, כדי שכולם יהיו באותה שורה.

.stars div {background:lightgray; height:15px; width:15px; border-radius:25px; float:left; margin:0 2px; }

אם עכשיו תבדקו, תראו שיש לכם 5 עיגולים אפורים.


סיימנו את החלק של העיצוב.
עכשיו נכין את החלק שאם נעבור על אחד מהעיגולים, אז כל העיגולים לפניו, והוא, יצבעו בכתום.
נכין אירוע מעבר על אחד מהעיגולים.

$(".stars div").hover(function() {

});

בתוך האירוע, ניצור משתנה בשם stars שיכיל את המספר של העיגולים שעברנו עליו, ונוסיף לו אחד, מכיוון שהספירה מתחילה מ - 0, ויותר נוח יהיה לנו להתחיל מ - 1.

var stars = $(this).index()+1;

נאפס את כל העיגולים, כי יכולים להישאר עיגולים צבועים ממעברים קודמים.

$(".stars div").css({"background":"lightgray"});

עכשיו נכין לולאה אשר תצבע את כל העיגולים שלפני העיגול שעברנו עליו, כולל אותו.

for(i = 0; i < stars; i++) {
$(".stars div").eq(i).css({"background":"orange"});
}

זהו, עכשיו אם תעברו תראו שיש לכם עיגולי דירוג.
הקוד המלא:

<style type="text/css">
.stars div {background:lightgray; height:15px; width:15px; border-radius:25px; float:left; margin:0 2px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".stars div").hover(function() {
var stars = $(this).index()+1;
$(".stars div").css({"background":"lightgray"});
for(i = 0; i < stars; i++) {
$(".stars div").eq(i).css({"background":"orange"});
}
});

});
</script>

<div class="stars">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

כל שאלה, הערה, בקשה תתקבל בברכה.

[-Smoxer-]

תודה רבה.

[CSS]

תודה רבה.

למה זה משנה לי את המילה ד י ר ו ג לכוכב?

[.Dor.]

תודה רבה על המדריך, המשך כך.