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>

如何将循环数组项传递给函数变量

2 个答案: