Javascript - jeśli dwa elementy zawierają tą samą klasę

Question

Próbuję zrobić tak, że jeśli dwa elementy mają taką samą klasę to zrób coś. Domyślam się, że chodzi o .contains, ale jak konkretnie? Bo mógłbym porównywać każdy element osobno, tj. jeśli jeden i drugi zawiera klasę yellow zrób coś, potem kolejny if tylko z black itd. A chciałbym, żeby to było dynamiczne w zależności od tego ile jest kolorów w tablicy... Jak to ugryźć? (chodzi o funkcję dragDrop ,ma porównać squere i round) Kod:

// //globalne zmienne
const squere = document.querySelectorAll(".squere");
const start = document.getElementById("start");
const timeDisplay = document.getElementById("time-left");
const round = document.querySelector(".round");

let time = 3;

//po kliknięciu w przycisk start losuje kolory i odpala licznik
start.addEventListener("click", asignColor);
start.addEventListener("click", interval);
start.addEventListener("click", signColorToCircle);

//funkcja przypisująca kolor 
function asignColor(){
    const colors = ["yellow", "black", "red", "pink"];

    squere.forEach(element => {
        const colorIndex = Math.floor(Math.random() * colors.length); //losuje kolor
        element.style.backgroundColor = colors[colorIndex]; //przypisuje kolor
        element.classList.add(colors[colorIndex]); //dodaje klase danego koloru
        colors.splice(colorIndex, 1);  //usuwa element z indexu

        //wszystkie elementy drag na każdym kwadracie
        element.addEventListener("dragstart", dragStart);
        element.addEventListener("dragend", dragEnd);
        
        
    });
}

function signColorToCircle(){
    const colors = ["yellow", "black", "red", "pink"];
    const colorIndex = Math.floor(Math.random() * colors.length);

    round.classList.add(colors[colorIndex]);
    
}

//odlicza czas do końca rundy
function timer(){
    if(time > 0){ //jeżeli czas jest większy od zera 
        time--;  //odejmij o 1
    }
    timeDisplay.innerHTML = time;  //wyświetl czas
}

//ustawia interwał na funckcji timer
function interval(){
    setInterval(timer, 1000);
}

round.addEventListener('dragover', dragOver);
round.addEventListener('dragenter', dragEnter);
round.addEventListener('dragleave', dragLeave);
round.addEventListener('drop', dragDrop);

//funkcje związane z przeciąganiem
function dragStart(){
    this.classList.add("squere-hold");
}

function dragEnd(){
    this.classList.remove("squere-hold");
}

function dragOver(event){
    event.preventDefault();
}

function dragEnter(event){
    event.preventDefault();
    this.classList.add("hover-over-circle-hold");
}

function dragLeave(){
    this.classList.remove("hover-over-circle-hold");
}

function dragDrop(){
    if(squere.contains())
}

 

<h1>Przeciągnij odpowiedni kolor do kwadratu</h1>
  <h2>Czas: <span id="time-left">3</span></h2>
  <div class="squere" id="red" draggable="true"></div>
  <div class="squere" id="blue" draggable="true"></div>
  <div class="squere" id="green" draggable="true"></div>
  <div class="squere" id="black" draggable="true"></div>
  <div class="round"></div>
  <input type="button" name="" value="start" id="start">

 

Answer 1

Jeżeli nie ma znaczenia jakie to są elementy to bym sprawdzał po przez: document.querySelectorAll('.klasa') a potem sprawdził czy length jest większy od 1. :)

Comments

Ale tych klas jest więcej i musiałbym porównywać każdą z osobna czyli na dobrą sprawę to samo co wypisywanie kolejnych .contains

---

A co ma się dziać jak będzie 2 -3 -4. Może podejście jest złe?

---

Ogólnie ma to być "gra" bez żadnego praktycznego zastosowania a jedynie dla poćwiczenia drag eventów i ogólnie programowania. 

Może lepiej będzie widać tu: https://codepen.io/anon/pen/bxjVOr

Klikamy start, program losuje kolory i przypisuje klasę w zależności od koloru do kwadratów i kółka (jeszcze nie zrobiłem wyświetlania koloru w kółku). I gracz ma po prostu wrzucić w ciągu kilku sekund taki sam kolor kwadratu do kółka.

Czyli puszczając odpowiedni kwadrat na kółko o tej samej klasie (kolorze) którą pobiera z tablicy colors odpala się if w funkcji dragDrop który będzie liczył punkt i losował znów. Ale chodzi mi tylko o warunek if'a. Mają być takie same kolory w puszczanym kwadracie jak i kółku.

Może faktycznie źle do tego podszedłem?

Answer 2

function dragDrop(){
    const colors = ["yellow", "black", "red", "pink"];
    for(var i = 0; i < squere.length; i++){
        if(squere[i].classList.contains("yellow") && round.classList.contains("yellow")){
            alert("dupa");
        }
    }
}

Bo mówię, jedyne co wymyśliłem to coś takiego jak u góry. Ale to by znaczyło, że muszę dać operator or i dla każdego tak samo wypisać. A co jeśli dojdzie na przykład kolejny kolor do tablicy? Będę musiał dopisać kolejny warunek.