Как задать 2 элементу класс active?

Question

[Alexander3928]

Делаю динамические элементы обьектом и методом map. Как задать 2 элементу с классом navigation__item класс active?

let objectNavigation = [
      { image: "./src/img/about/show/desine.jpeg" },
      { image: "./src/img/about/show/front.jpeg" },
      { image: "./src/img/about/show/ux.jpeg" },
    ];

const navigation = document.createElement("div");
navigation.classList.add("navigation", "scroll-animation-item");

objectNavigation.map((element, index) => {
      let result = `
        <div class="navigation__item">
          <img src="${element.image}">
        </div>
      `;

      navigation.innerHTML += result;
    });

Answer 1

[0xD34F]

Кому и какой надо добавить класс:

const index = 1;
const className = 'active';

Можно при создании элементов проверять, чему равен текущий индекс:

navigation.innerHTML = objectNavigation
  .map((n, i) => `
    <div class="${i === index ? className : ''}">
      <img src="${n.image}">
    </div>`)
  .join('');

или

navigation.append(...objectNavigation.map((n, i) => {
  const div = document.createElement('div');
  const img = document.createElement('img');
  img.src = n.image;
  div.append(img);
  div.classList.toggle(className, i === index);
  return div;
}));

или

for (const [ i, n ] of objectNavigation.entries()) {
  navigation.appendChild(document.createElement('div'));
  navigation.lastChild.appendChild(new Image);
  navigation.lastChild.lastChild.src = n.image;
  navigation.lastChild.className = i === index ? className : '';
}

Другой вариант - добавлять класс после того, как все элементы будут созданы:

navigation.children[index]?.classList.add(className);

Answer 2

[Михаил Барзун]

как вам идея добавить в объект "objectNavigation" еще один ключ, который определяет наличие класса active для будущего элемента?

Comments

[Alexander3928]

Как вариант. Я так делал. Про хочу узнать и другие варианты