שלח תשובה

זירת השאלות

2132
צפיות
4
תשובות

מערך ב- JQUERY

,‏ 15 בינואר, 2015

שלום,
אני דיי חדשה בתחום..
יש לי דף HTML עם מספר DIVים בתוכו, , כל אחד מהם הוא קוביה בגודל 150X150. לכולם תכונות זהות מלבד הצבע, כל אחד בצבע שונה.
במקום לתת עיצוב צבע נפרד לכל אחד אני רוצה לבנות מערך ב- Jquery שירוץ על כל אחד מהם וייצבע באופן רנדומלי כל אחד בצבע אחר, לא משנה לי סדר הצבעים.
אשמח לקבל כיוון איך לעשות זאת.
תודה 🙂

4 תשובות

  1. Roi Trigerman הגיב:

    אני מניח שהתכוונת ללולאה ולא למערך (מערך הוא רשימה של אובייקטים).

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

    אחר כך ניתן להשתמש בפונקציה הזאת בלולאת each של jQuery , כאשר עבור כל div שהלולאה עוברת עליו, היא תפעיל את הפונקציה שבנינו, ואת הצבע שהתקבל תשים בתור צבע רקע של ה-div.

    הקוד המדוייק והעובד, למקרה שתרצי, הוא זה:


    <html>
    <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script&gt<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>

  2. Nat88 הגיב:

    איזה הסבר מפורט וברור, מגניב, תודה!! 🙂
    דבר אחד נוסף, במקרה הזה בגלל שזה מגריל צבע רנדומלית, יוצא מצב שהצבעים חוזרים על עצמם הרבה פעמים, יש דרך לגרום לכך שצבעים דומים לא יהיו סמוכים אחד לשני או שזה יעבור על כל הצבעים לפני שהוא צובע קוביה באותו צבע פעם נוספת?

  3. Roi Trigerman הגיב:

    דרך קצת יותר קצרה: במקום מלא שורות של switch-case ניתן לבנות מערך עם שמות הצבעים, ואז בעזרת אותה פונקציה של מספר רנדומלי לפנות למיקום רנדומלי במערך ולהחזיר את שם הצבע שהוא מכיל:


    function GetRandomColor() {
    colors = ['red', 'green', 'blue', 'black','yellow', 'pink','lightgreen','orange','lightblue','gray']
    return colors[Math.floor(Math.random()*colors.length)];
    }

    נראה קצת יותר נורמלי (ובונוס: נסי למצוא משהו ממש לא קשור בתגובה הראשנה שלי 🙂 )

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

  4. Nat88 הגיב:

    אני אשת QA, שמה לב לפרטים.. ראיתי כבר בפעם הראשונה את ה- Thursday בין הצבעים , הנחתי שזו טעות אז התעלמתי… 🙂

שלח תשובה