Ta sama funkcja do wielu buttonów. Jak skrócić kod?

pytanie zadane 3 stycznia 2021 w JavaScript przez urban0101 Początkujący (430 p.)

https://jsfiddle.net/r58d6nkc/15/

Jeśli byłoby takich buttonów np. 20. Jak skrócić kod, żeby nie pisać tego samego x20. Wiem, że pętlą można to zrobić, tylko nie wiem jak się za to zabrać.

komentarz 3 stycznia 2021 przez wizarddos Nałogowiec (25,930 p.)

co dokładniej chcesz skrócić? linijki document.querySelector?

komentarz 5 stycznia 2021 przez VBService Ekspert (252,660 p.)

@urban0101,

Wiem, że pętlą można to zrobić, ...

chyba nie koniecznie ... pokaSZ

3 odpowiedzi

odpowiedź 3 stycznia 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

Da się. Po kolei:

1. HTML

<div class="div">
    <button class="btn">zmień</button>
</div>
<div class="div">
    <button class="btn">zmień</button>
</div>
<!-- I tak dalej ... -->

2. CSS

.div {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 20px;
}
.red {
  background-color: red;
}

3. JS

const btn = document.querySelectorAll('.btn');

const show = (e) => {
  e.target.parentNode.classList.toggle('red');
};

for(let k=0; k<btn.length; k++) {
	btn[k].addEventListener('click', show);
}

Zerknij tu: https://stackoverflow.com/questions/42157254/changing-parent-class-with-childs-button-using-javascript/42157479

komentarz 3 stycznia 2021 przez CSSoup Mądrala (6,460 p.)

Ja żeby było ładniej zamiast zwykłego fora wrzuciłbym tutaj foreach ;)

const btns = document.querySelectorAll('.btn');
 
const show = (e) => {
  e.target.parentNode.classList.toggle('red');
};
 
btns.forEach(btn => btn.addEventListener('click', show));

1	komentarz 4 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.) Albo zastosować event delegation, żeby nie używać pętli.

komentarz 4 stycznia 2021 przez urban0101 Początkujący (430 p.)

O super! A co w przypadku jakbym chciał przełączać class innego diva? Tak , żeby zamiast parentNode była pobrana klasa, tak jak z buttonami.

komentarz 4 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie bardzo rozumiem pytanie. Chcąc zmienić klasę elementowi, musisz mieć do niego referencję - pobraną np. poprzez document.getElementById lub document.querySelector, albo odnieść się za pośrednictwem innego, wcześniej pobranego, elementu w DOM na zasadzie relacji przodek/potomek, rodzeństwo - lub mieć listę tych elementów i odnieść się do konkretnego po indeksie.

komentarz 5 stycznia 2021 przez VBService Ekspert (252,660 p.)

@urban0101, np.: Element.closest()

e.target.closest('div');

odpowiedź 3 stycznia 2021 przez DawidK Nałogowiec (37,910 p.)

Pewnie są dziesiątki sposobów, żeby to zrobić, ja użułbym czegoś takiego.

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        div {
            height: 200px;
            margin: 20px;
            width: 200px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }
    </style>

<body>
    <div id='container'>

    </div>

    <script>

        const container = document.querySelector('#container')

        makeButton = (container, btnClass, btnText) => {
            const div = document.createElement('div')
            const button = document.createElement('button')
            const text = document.createTextNode(btnText)

            button.append(text)
            addEvent(button)
            div.append(button)
            div.classList.add(btnClass)
            container.append(div)
        }

        changeColor = (e) => {
            const parentDiv = e.target.parentNode
            if (parentDiv.classList.contains('red')) {
                parentDiv.classList.remove('red')
                parentDiv.classList.add('blue')
            } else {
                parentDiv.classList.remove('blue')
                parentDiv.classList.add('red')
            }
        }

        addEvent = (button) => {
            button.addEventListener('click', changeColor)
        }

        for (let i = 0; i < 20; i++) {
            makeButton(container, 'red', 'zmien')
        }


    </script>
</body>

</html>

odpowiedź 5 stycznia 2021 przez VBService Ekspert (252,660 p.)
edycja 5 stycznia 2021 przez VBService

Oto Moja propozycja. click ^ ^ ^ ^

<div class="wrap"></div>

.square {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 20px;
  transition: background 0.5s ease-out;
}
.red{
  background-color: red;
}

const square = document.querySelector('.wrap');
square.innerHTML = '<div class="square"><button class="btn">zmień</button></div>'.repeat(20);
square.addEventListener('click', (e) => {
  if (e.target && e.target.matches('button.btn')) {
    e.target.closest('div.square').classList.toggle('red');
    //e.target.parentNode.classList.toggle('red');
  }
});