צריך עזרה ב JS לגבי attributes

פיתוח Web
#1

אז ככה יש לי משחק קטן של משחק הזיכרון, מה שאני מנסה לעשות כרגע זה לעשות כפתור של מציאת הזוג המתאים.
ז"א שאם אני לוחץ על איזשהו קלף וילחץ על הכפתור הוא יהפוך לי את הזוג שלו.
לכל תמונה יש לי מספר עם attribute “DATA-CARD” נירא ככה:

<div class="card" data-card="1" onclick="cardClicked(this)"></div>

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

    function findPair(){
        let divsCards = document.querySelectorAll('.card');
        for (i = 0; i <divsCards.length; i++){

        Array.from(divsCards).forEach(function(card){


            // If the pair is match and it's not the same card we clicked
            if (card.getAttribute("data-card") === card.getAttribute("data-card")) {
        
              console.log('Found a match.');
              // flip it.
              card.classList.toggle("flipped");
            
        } 
        });
        }
    }
#2

הי דניאל,

אשמח לנסות לעזור אבל קודם עוד קצת פרטים: מהי הפונקציה cardClicked? ולמה יש לך onclick שם? אתה משתמש בפריימוורק כלשהו?

לגבי findPair שכתבת השורה הזאת נראית קצת מוזרה:

            if (card.getAttribute("data-card") === card.getAttribute("data-card")) {

נראה שהתנאי תמיד יחזיר ערך ״אמת״ כי אתה בודק אם משהו שווה לעצמו.

דבר אחרון אני חושב שאפשר להשתמש ב CSS Selector כדי להגיע ישירות ל div שיש לו את אותו ערך data-card אבל אין לו את הקלאס flipped. אם אתה לא בטוח איך או מה ה selector מציע שתתחיל מהמשחק הזה כאן כדי ללמוד יותר על Selectors:

ותתקדם משם או תשאל שאלה יותר ספציפית

בהצלחה

#3

היי ינון,
הקוד של המשחק נמצא פה --> https://jsfiddle.net/DanielShokri/w59yvmp4/1/
לא משתמש בFW .
מה שאני מחפש לעשות הוא:
שברגע שיש לי קלף הפוך ואני ילחץ על FindPair , הקוד ירוץ על כל הדיבים ויחפש את הזוג התואם שלו, ויהפוך את הזוג התואם גם כן, מה שיקנה לו את הקלאס flipped .
זה בערך מה שאני מנסה לעשות --> https://nimb.ws/EAky6m
הבעיה שאני הופך את זה למערך, אני לא יודע איך להשוואות את זה למה שכבר הפוך, מקווה שהסברתי את עצמי טוב.

#4

הי,

הפונקציה findPair שלך לא בכיוון. אתה לא צריך לרוץ על כל הדיבים ולחפש מערכים, אלא להשתמש ב CSS Selector כדי להגיע בפקודה אחת לדיב שאתה צריך.

קבל נקודת התחלה אחרת לאותו התרגיל:

יש שם ב JavaScript את השורה:

const matchingCard = document.querySelector('...');

תמצא מה לכתוב בתוך הפונקציה כדי לקבל את הקלף המתאים - בלי לולאות רק באמצעות CSS. אחרי זה יהיה לך יותר קל לתקן את קוד המשחק שלך