• 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

+1 głos
73 wizyt
pytanie zadane 20 lutego w JavaScript przez Grzegorz Mikina Dyskutant (7,730 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 23 lutego przez overcq Pasjonat (17,750 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 przez VBService Mędrzec (172,150 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 przez VBService Mędrzec (172,150 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 przez VBService Mędrzec (172,150 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 przez VBService Mędrzec (172,150 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 152 wizyt
pytanie zadane 25 lutego 2020 w JavaScript przez matedoo Nowicjusz (210 p.)
0 głosów
2 odpowiedzi 3,459 wizyt
pytanie zadane 28 stycznia 2017 w JavaScript przez MTB Użytkownik (690 p.)
+1 głos
2 odpowiedzi 998 wizyt

88,355 zapytań

136,951 odpowiedzi

305,670 komentarzy

58,619 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...