• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Konferencja JOIN! 2018
0 głosów
83 wizyt
pytanie zadane 13 września w JavaScript, jQuery, AJAX przez Kalif Użytkownik (640 p.)

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">

 

2 odpowiedzi

0 głosów
odpowiedź 14 września przez ShiroUmizake Nałogowiec (40,880 p.)
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. :)
komentarz 14 września przez Kalif Użytkownik (640 p.)
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
komentarz 14 września przez ShiroUmizake Nałogowiec (40,880 p.)
A co ma się dziać jak będzie 2 -3 -4. Może podejście jest złe?
komentarz 14 września przez Kalif Użytkownik (640 p.)

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?

0 głosów
odpowiedź 14 września przez Kalif Użytkownik (640 p.)
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.

Podobne pytania

0 głosów
2 odpowiedzi 263 wizyt
0 głosów
1 odpowiedź 118 wizyt
0 głosów
2 odpowiedzi 144 wizyt
pytanie zadane 10 marca 2017 w C i C++ przez BinaryMan Stary wyjadacz (11,880 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

55,139 zapytań

99,357 odpowiedzi

204,347 komentarzy

27,138 pasjonatów

Przeglądających: 391
Pasjonatów: 32 Gości: 359

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...