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

Dodawanie klasy dla możliwie bardzo dużej liczby elementów

VPS Starter Arubacloud
+1 głos
271 wizyt
pytanie zadane 20 lutego 2022 w JavaScript przez Grzegorz Mikina Dyskutant (8,060 p.)
Piszę skrypt Javascript dla galerii zdjęć. I tych elementów mam np. 30. Kazdy element ma swoje id. W jaki sposób mogę skrócić kod javascript. Złapanie id 30 elementów to już bardzo długi kod, a co dopiero sterowanie ich klasami. Przypuszczam że istnieje możliwość jakiegoś krótkiego zapisu. W jaki sposób mogę podejść do tego inaczej.
komentarz 20 lutego 2022 przez overcq Pasjonat (21,540 p.)
Wczytać kolekcję po klasie lub znaczniku?

Pokaż kod, jeśli chcesz szczegółów.
komentarz 20 lutego 2022 przez adrian17 Ekspert (344,100 p.)
Trochę dziwne pytanie. Te 30 elementów musiało zostać dodane jakoś automatycznie, nie? Nie powinieneś myśleć jak im po fakcie dodać klasę, tylko one od początku powinny ją mieć.
komentarz 20 lutego 2022 przez VBService Ekspert (251,210 p.)

Jeden EventListener click na "kontener" i ...

How JavaScript Event Delegation Works   (event.target)

... możesz i 100-u elementom zmieniać style. smiley

komentarz 20 lutego 2022 przez adrian17 Ekspert (344,100 p.)
No, ale... podtrzymuję, że to próba leczenia objawów, bez próby zrozumienia źródłowego problemu.
komentarz 21 lutego 2022 przez VBService Ekspert (251,210 p.)

@adrian17; Tak, masz rację, Ja też odnoszę wrażenie, że problem leży u podstaw.

Pokaż kod, jeśli chcesz szczegółów.

komentarz 22 lutego 2022 przez Grzegorz Mikina Dyskutant (8,060 p.)

Proszę bardzo.
Tu macie kod.

 

const nadruk25 = document.getElementById("nadruk-25");
const nadruk26 = document.getElementById("nadruk-26");
const nadruk27 = document.getElementById("nadruk-27");

let nodeList = document.querySelectorAll(".active-item");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].classList.remove('active-item');
}

nadruk1Top.addEventListener('click', event => {

  let nodeList = document.querySelectorAll(".active-item");
  for (let i = 0; i < nodeList.length; i++) {
    nodeList[i].classList.remove('active-item');
  }
    nadruk1Top.classList.add('active-item');
      if(nadruk1Top.classList == 'active-item'){
        nadruk1Top.classList.add('greenBorder');
      }
      else{
        nadruk1Top.classList.remove('greenBorder');
      }
    
  });

nadruk1.addEventListener('click', event => {

  let nodeList = document.querySelectorAll(".active-item");
  for (let i = 0; i < nodeList.length; i++) {
    nodeList[i].classList.remove('active-item');
  }
    console.log(nodeList);
    nadruk1.classList.add('active-item');
  });
  
<div class="col-md-4 col-xs-6 color-rounded mt-3">
                        <div id="color-34" class="color-box color-box3 color-4">
                            <p class="color-title color-grey text-center">Whitewood</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6 color-rounded mt-3">
                        <div id="color-35" class="color-box color-box3 color-5">
                            <p class="color-title color-grey text-center">Whitewood</p>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6 color-rounded mt-3">
                        <div id="color-36" class="color-box color-box3 color-6">
                            <p class="color-title color-grey text-center">Whitewood</p>
                        </div>
</div>

Proszę nie wypominać mi polskich nazw klas. Taki kod dostałem.

komentarz 22 lutego 2022 przez Grzegorz Mikina Dyskutant (8,060 p.)
Ogólnie skróciłem kod z 2000 tyś linijek do 500
komentarz 23 lutego 2022 przez overcq Pasjonat (21,540 p.)
let nodeList = document.querySelectorAll( ".active-item" );
for( let i = 0; i !== nodeList.length; i++ )
    nodeList[i].classList.remove( "active-item" );
 
function click_top(event)
{   let nodeList = document.querySelectorAll( ".active-item" );
    for( let i = 0; i !== nodeList.length; i++ )
        nodeList[i].classList.remove( "active-item" );
    event.target.classList.add( "active-item" );
    if( event.target.classList == "active-item" )
        event.target.classList.add( "greenBorder" );
    else
        event.target.classList.remove( "greenBorder" );
}
function click(event)
{   let nodeList = document.querySelectorAll( ".active-item" );
    for( let i = 0; i !== nodeList.length; i++ )
        nodeList[i].classList.remove( "active-item" );
    console.log( nodeList );
    event.target.classList.add( "active-item" );
}

for( let i = 1; i !== 28; i++ )
{   const nadruk_top = document.getElementById( `nadruk-top-${i}` );
    const nadruk = document.getElementById( `nadruk-${i}` );
    nadruk_top.addEventListener( "click", click_top );
    nadruk.addEventListener( "click", click );
}

 

komentarz 26 lutego 2022 przez VBService Ekspert (251,210 p.)

@Grzegorz Mikina, w podanym przez Ciebie kodzie html (php)

<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-34" class="color-box color-box3 color-4">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-35" class="color-box color-box3 color-5">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-36" class="color-box color-box3 color-6">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>

 

nie widać elementów o id

const nadruk25 = document.getElementById("nadruk-25");
const nadruk26 = document.getElementById("nadruk-26");
const nadruk27 = document.getElementById("nadruk-27");

kolejne, "odniesienie" do elementów, których nie ma w powyższym kodzie

nadruk1Top = ...;

nadruk1 = ...;

 

przykłady do udostępnionego kodu html (php) poniżej

komentarz 26 lutego 2022 przez VBService Ekspert (251,210 p.)
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-34" class="color-box color-box3 color-4 active-item">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-35" class="color-box color-box3 color-5">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-36" class="color-box color-box3 color-6 active-item">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
// wszystkie elementy, których 'id' zaczyna się od słowa 'color'
const nadruki = document.querySelectorAll('[id^="color"]');

for (nadruk of nadruki) {
  nadruk.addEventListener('click', (event) => {
    const nadruk = event.target.parentElement;
    if (nadruk.classList.contains('active-item')) {
      nadruk.classList.add('greenBorder');
    } else {
      nadruk.classList.remove('greenBorder');
    }
  });
}

 

komentarz 26 lutego 2022 przez VBService Ekspert (251,210 p.)
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-34" class="color-box color-box3 color-4 active-item">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-35" class="color-box color-box3 color-5">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
<div class="col-md-4 col-xs-6 color-rounded mt-3">
  <div id="color-36" class="color-box color-box3 color-6 active-item">
    <p class="color-title color-grey text-center">Whitewood</p>
  </div>
</div>
// wszystkie elementy, których 'id' zaczyna się od słowa 'color'
const nadruki = document.querySelectorAll('[id^="color"]');

for (nadruk of nadruki) {
  nadruk.addEventListener('click', (event) => {
    const nadruk = event.target;
    if (nadruk.parentElement.classList.contains('active-item')) {
      nadruk.classList.add('greenBorder');
    } else {
      nadruk.classList.remove('greenBorder');
    }
  });
}

 

komentarz 26 lutego 2022 przez VBService Ekspert (251,210 p.)
<div class="container">
  <div class="col-md-4 col-xs-6 color-rounded mt-3">
    <div id="color-34" class="color-box color-box3 color-4 active-item">
      <p class="color-title color-grey text-center">Whitewood</p>
    </div>
  </div>
  <div class="col-md-4 col-xs-6 color-rounded mt-3">
    <div id="color-35" class="color-box color-box3 color-5">
      <p class="color-title color-grey text-center">Whitewood</p>
    </div>
  </div>
  <div class="col-md-4 col-xs-6 color-rounded mt-3">
    <div id="color-36" class="color-box color-box3 color-6 active-item">
      <p class="color-title color-grey text-center">Whitewood</p>
    </div>
  </div>
</div>
const nadruki = document.querySelector('.container');
nadruki.addEventListener('click', activeItem);

function activeItem(e) {
  //console.log(e.target.parentElement.id);
  const nadruk = e.target;
  if (nadruk.parentElement.classList.contains('active-item') && nadruk.nodeName == 'P') {
    nadruk.classList.add('greenBorder');
  } else {
    nadruk.classList.remove('greenBorder');
  }
}

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 209 wizyt
pytanie zadane 25 lutego 2020 w JavaScript przez matedoo Nowicjusz (210 p.)
0 głosów
2 odpowiedzi 4,286 wizyt
pytanie zadane 28 stycznia 2017 w JavaScript przez MTB Użytkownik (690 p.)
+1 głos
2 odpowiedzi 1,202 wizyt

92,452 zapytań

141,262 odpowiedzi

319,077 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!

...