2132
צפיות
צפיות
4
תשובות
תשובות
מערך ב- JQUERY
שלום,
אני דיי חדשה בתחום..
יש לי דף HTML עם מספר DIVים בתוכו, , כל אחד מהם הוא קוביה בגודל 150X150. לכולם תכונות זהות מלבד הצבע, כל אחד בצבע שונה.
במקום לתת עיצוב צבע נפרד לכל אחד אני רוצה לבנות מערך ב- Jquery שירוץ על כל אחד מהם וייצבע באופן רנדומלי כל אחד בצבע אחר, לא משנה לי סדר הצבעים.
אשמח לקבל כיוון איך לעשות זאת.
תודה 🙂
4 תשובות
אני מניח שהתכוונת ללולאה ולא למערך (מערך הוא רשימה של אובייקטים).
הייתי בונה פונקציה שמחזירה שם של צבע רנדומלי על ידי הגרלה של מספר רנדומלי, ואז החזרה של צבע שונה לכל מספר שיצא (למשל, אם יצא 1 יוחזר אדום, אם 2, יוחזר צהוב וכו').
אחר כך ניתן להשתמש בפונקציה הזאת בלולאת each של jQuery , כאשר עבור כל div שהלולאה עוברת עליו, היא תפעיל את הפונקציה שבנינו, ואת הצבע שהתקבל תשים בתור צבע רקע של ה-div.
הקוד המדוייק והעובד, למקרה שתרצי, הוא זה:
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script><style>
.square{
width:150px;
height:150px;
border:3px solid black;
}
</style>
</head>
<body>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<script>
function GetRandomColor()
{
var num = Math.floor((Math.random() * 10) + 1);
switch (num) {
case 1:
return "red";
case 2:
return "green";
case 3:
return "blue";
case 4:
return "Thursday";
case 5:
return "yellow";
case 6:
return "pink";
case 7:
return "lightgreen";
case 8:
return "orange";
case 9:
return "lightblue";
case 10:
return "gray";
}
}
$('.square').each(function(){
$(this).css("background-color",GetRandomColor());
</body>
</html>
איזה הסבר מפורט וברור, מגניב, תודה!! 🙂
דבר אחד נוסף, במקרה הזה בגלל שזה מגריל צבע רנדומלית, יוצא מצב שהצבעים חוזרים על עצמם הרבה פעמים, יש דרך לגרום לכך שצבעים דומים לא יהיו סמוכים אחד לשני או שזה יעבור על כל הצבעים לפני שהוא צובע קוביה באותו צבע פעם נוספת?
דרך קצת יותר קצרה: במקום מלא שורות של switch-case ניתן לבנות מערך עם שמות הצבעים, ואז בעזרת אותה פונקציה של מספר רנדומלי לפנות למיקום רנדומלי במערך ולהחזיר את שם הצבע שהוא מכיל:
function GetRandomColor() {
colors = ['red', 'green', 'blue', 'black','yellow', 'pink','lightgreen','orange','lightblue','gray']
return colors[Math.floor(Math.random()*colors.length)];
}
נראה קצת יותר נורמלי (ובונוס: נסי למצוא משהו ממש לא קשור בתגובה הראשנה שלי 🙂 )
לגבי השאלה השניה, תגדירי משתנה חיצוני (מחוץ לפונקציה) עבור הצבע הנוכחי, ומתוך הפונקציה תשמרי כל פעם את המספר שיצא, ואז רק אם המספר החדש שונה מהמספר שיצא קודם, תחזירי את הצבע המתאים לו. אני משאיר לך קצת לחשוב הפעם (גם כי אין לי זמן).
אני אשת QA, שמה לב לפרטים.. ראיתי כבר בפעם הראשונה את ה- Thursday בין הצבעים , הנחתי שזו טעות אז התעלמתי… 🙂