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

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

VPS Starter Arubacloud
+1 głos
197 wizyt
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,130 p.)
co dokładniej chcesz skrócić? linijki document.querySelector?
komentarz 5 stycznia 2021 przez VBService Ekspert (251,170 p.)

@urban0101,

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

chyba nie koniecznie ... wink pokaSZ

3 odpowiedzi

+2 głosów
odpowiedź 3 stycznia 2021 przez SzkolnyAdmin Szeryf (86,280 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

1
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.
1
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 (251,170 p.)

@urban0101, np.: Element.closest()

e.target.closest('div');

 

+1 głos
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>

 

0 głosów
odpowiedź 5 stycznia 2021 przez VBService Ekspert (251,170 p.)
edycja 5 stycznia 2021 przez VBService

Oto Moja propozycja. wink                                                                 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');
  }
});

 

Podobne pytania

0 głosów
1 odpowiedź 275 wizyt
pytanie zadane 12 września 2019 w JavaScript przez Bartłomiej Bolesta Obywatel (1,630 p.)
0 głosów
1 odpowiedź 172 wizyt
pytanie zadane 12 listopada 2017 w JavaScript przez Dagmar Lottie Początkujący (280 p.)
0 głosów
1 odpowiedź 337 wizyt
pytanie zadane 14 stycznia 2017 w PHP przez Zazazing Nowicjusz (150 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...