• 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ę

VPS Starter Arubacloud
0 głosów
279 wizyt
pytanie zadane 13 września 2018 w JavaScript 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 2018 przez ShiroUmizake Nałogowiec (46,300 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 2018 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 2018 przez ShiroUmizake Nałogowiec (46,300 p.)
A co ma się dziać jak będzie 2 -3 -4. Może podejście jest złe?
komentarz 14 września 2018 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 2018 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 2,025 wizyt
0 głosów
1 odpowiedź 183 wizyt
0 głosów
1 odpowiedź 106 wizyt
pytanie zadane 29 stycznia 2020 w Python przez kingmajster Użytkownik (520 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...