как передать зацикленные элементы массива в переменную функции

Question

У меня есть группа изображений, и у каждого изображения есть заголовок. Я хочу изменить фон и заголовок каждого изображения на другой цвет при наведении курсора

. Теперь я выбрал свои изображения и заголовки и закинул их визменить их цвет, но это не работает, я не удивлен, просто хочу знать, как это исправить

function changeBgAndTitle(element, event, backgroundColor, titleColor) {
  element.addEventListener(event, () => {
    const projectThumbnail = document.querySelectorAll('.projects-list img');
    const projectTitle = document.querySelectorAll('article h1');
    for (i = 0; i < projectThumbnail.length; i++) {
      console.log(projectThumbnail[0]);
    }
    for (i = 0; i < projectTitle.length; i++) {
      projectTitle[i].style.color = titleColor;
    }
  })
}
changeBgAndTitle(projectThumbnail[0], 'mouseover', '#0090d8', 'white');

<div class="projects-list">
  <article class="old-and-blue">
    <h1>old and blue</h1>
    <figure>
      <a href="/old-and-blue.html" class="noclick">
        <img src="assets/media/images/slides/old-and-blue.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="dably">
    <h1>dably</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/dably.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cairo">
    <h1>cairo</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/cairoe.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cta">
    <h1>cta</h1>
    <figure>
      <a href="/cta.html">
        <img src="assets/media/images/slides/cta.jpg" alt="">
      </a>
    </figure>
  </article>
</div>

Answer 1

Если вы хотите позвонить addEventListener внутри цикла:

function changeBgAndTitle(element, event, backgroundColor, titleColor) {
    const projectThumbnail = element.querySelectorAll('.projects-list img')[0];
    projectThumbnail.addEventListener(event, () => {
        var projectTitle = element.querySelectorAll('h1');
        projectTitle[0].style.color = titleColor;
    })
}

const articles = document.querySelectorAll('.projects-list article');

for (i = 0; i < articles.length; i++) {
    changeBgAndTitle(articles[i], 'mouseover', '#0090d8', 'white');

}

https://jsfiddle.net/zf2xb48e/

Answer 2

Вы должны вызывать addEventListener внутри цикла, не передавая ни одного элемента функции.

function changeBgAndTitle(event, backgroundColor, titleColor) {
  const projectThumbnail = document.querySelectorAll('.projects-list img');
  const projectTitle = document.querySelectorAll('article h1');
  projectThumbnail.forEach((element, i) => element.addEventListener(event, () => {
    console.log(element);
    projectTitle[i].style.color = titleColor;
    projectTitle[i].style.backgroundColor = backgroundColor;
  }));
}
changeBgAndTitle('mouseover', '#0090d8', 'white');

<div class="projects-list">
  <article class="old-and-blue">
    <h1>old and blue</h1>
    <figure>
      <a href="/old-and-blue.html" class="noclick">
        <img src="assets/media/images/slides/old-and-blue.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="dably">
    <h1>dably</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/dably.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cairo">
    <h1>cairo</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/cairoe.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cta">
    <h1>cta</h1>
    <figure>
      <a href="/cta.html">
        <img src="assets/media/images/slides/cta.jpg" alt="">
      </a>
    </figure>
  </article>
</div>