דירוג כוכבים ב jQuery.
במדריך הזה נלמד איך לעשות את הדירוג של הכוכבים, שכאשר עוברים על כוכב, אז כל הכוכבים לפני נצבעים גם.
נתחיל ביצירת הכוכבים.
לצורך הדוגמא אני אשתמש בעיגולים ולא בכוכבים, כדי לא ליצור בילבולים.
ניצור דיב עם class="stars", שבתוכו יהיו דיבים ריקים, שכל דיב מציין כוכב.
קוד HTML:
<div class="stars"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
עכשיו נעשה להם רקע אפור, נגדיר להם אורך ורוחב, נעגל להם את הפינות (להפוך אותם לעיגול), נעשה מרווח בינהם ונעשה את כולם בצד שמאל, כדי שכולם יהיו באותה שורה.
קוד HTML:
.stars div {background:lightgray; height:15px; width:15px; border-radius:25px; float:left; margin:0 2px; }
סיימנו את החלק של העיצוב.
עכשיו נכין את החלק שאם נעבור על אחד מהעיגולים, אז כל העיגולים לפניו, והוא, יצבעו בכתום.
נכין אירוע מעבר על אחד מהעיגולים.
קוד HTML:
$(".stars div").hover(function() {
});
קוד HTML:
var stars = $(this).index()+1;
קוד HTML:
$(".stars div").css({"background":"lightgray"});
קוד HTML:
for(i = 0; i < stars; i++) {
$(".stars div").eq(i).css({"background":"orange"});
}
הקוד המלא:
קוד HTML:
<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>
הודעת מערכת