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

Question

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.

Comments

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

 

---

@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

---

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

 

---

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

 

---

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