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

addEventListener once / toggle?

Object Storage Arubacloud
0 głosów
180 wizyt
pytanie zadane 11 listopada 2019 w JavaScript przez BlvckFox Gaduła (4,240 p.)

Cześć, mam problem, ponieważ chcę zrobić, żeby użytkownik po wciśnięciu na div 'click-me' pojawiał mu się div z informacjami, po wciśnięciu na przycisk close lub otworzeniu drugiego diva 'click-me' ten pierwszy ma być schowany. Jako, że div z informacjami jest rodzicem 'click-me' to próbowałem przy użyciu {once: true}, problem jest taki, że potem już nie można do tego diva dodać addEventListener, nie wiem dlaczego. Kod: 
https://codepen.io/FoxCode/pen/dyyjVoJ

1 odpowiedź

0 głosów
odpowiedź 11 listopada 2019 przez DawidK Nałogowiec (37,910 p.)

Nie jest to pewnie najszczęśliwsze rozwiązanie, ale realizuje efekt.

Dodanie klasy div-info do elementów, które mają się pojawiać i ustawienie klasy hide (display:none) dla wszystkich tych divów. Póżniej dodanie clicka, który ukrywa wszystkie divy (dzięki temu po kliknięciu na obojetnie który div jednocześnie widoczny jest tylko jeden - pozostale są ukryte) i ostatecznie usunięcie klasy hide co sprawi, że konkretny element jest widoczny. Dodanie drugiego eventu dla buttonów, gdzie po kliknięciu dodadzą klasę 'hide' do konkretnego rodzica, w którym są zawarte.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Toogle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>
<body>
    <div class="click-me ">Kliknij mnie!
        <div class="div-info hide">
            Informacja
            <button type="button" class="close">zamknij</button>
        </div>
    </div>
      
    <div class="click-me ">Kliknij mnie też!
        <div class="div-info hide">
            Informacja 2
            <button type="button" class="close">zamknij</button>
        </div>
    </div>

    <script src='main.js'></script>
</body>
</html>

main.js

const elements = document.querySelectorAll(".click-me");
const closeButton = document.querySelectorAll(".close");
const divInfo = document.querySelectorAll(".div-info");

elements.forEach(e => {
    e.addEventListener("click", openCard);
});

closeButton.forEach(e => {
    e.addEventListener("click", closeCard);
});

function openCard(ev){
    hideAll();
    let element = ev.target.querySelector('.div-info');
    if(element){
        element.classList.remove('hide');
    }
}

function closeCard(ev){
    let element = ev.target.parentNode;
    element.classList.add('hide');
}

function hideAll() {
    divInfo.forEach(e => {
        e.classList.add('hide');
    });
}

main.css

*{
    margin: 0;
    padding: 0;
}

.click-me{
    padding:10px;
    background-color: #111;
    color: #eee;
    display: block;
    width: 100px;
    margin: 10px;
  }

  .hide{
    display: none;
  }

  .div-info{
    background-color: red;
  }
  

 

Podobne pytania

0 głosów
1 odpowiedź 86 wizyt
0 głosów
1 odpowiedź 284 wizyt
pytanie zadane 28 maja 2019 w JavaScript przez Kerto Nowicjusz (240 p.)
0 głosów
0 odpowiedzi 378 wizyt
pytanie zadane 12 stycznia 2019 w JavaScript przez kacperl95 Obywatel (1,980 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 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

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!

...