addEventListener once / toggle?

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ź

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;
  }