Question

我使用w3.css框架。在中间有一个带标题的幻灯片。我想使用js，即当mouseOver标题颜色发生变化时，当我将鼠标输出背景颜色恢复到之前的位置时。我有三个相同的div块（下面显示的HTML代码）：

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover"> 
      HOVER TO MAKE ME TEAL
  </div>
</div>

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover">
      HOVER TO MAKE ME TEAL
  </div>
</div>

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover">
      HOVER TO MAKE ME TEAL
  </div>
</div>

我的javascript有一些问题，但不确定是什么问题。（我是业余javascript自学成才）。我的JS代码（如下所示）：

document.getElementsByClassName("hover").addEventListener("mouseover", mouseOver);
document.getElementsByClassName("hover").addEventListener("mouseout", mouseOut);

var classChanged = document.getElementsByClassName("hover");
for (z = 0; classChanged.length; z++) { /* Iteration */
classChanged[z].style.backgroundColor = this; /* How to bind two functions shown below ?!*/

function mouseOver(classChanged) { /* binding with keyword THIS? */ 
classChanged.classList.remove("w3-black");
classChanged.classList.add("w3-teal");
}

function mouseOut(classChanged) { /* binding with keyword THIS? */ 
classChanged.classList.remove("w3-teal");
classChanged.classList.add("w3-black");
}

我的任务是将功能应用于共享相同类的所有三个div块=＆＃34; ... hover＆＃34;。任何帮助，将不胜感激。谢谢。 p.s我设法使用getElementById（）方法触发第一个HTML块函数以更改背景颜色。仍然只有一个。：＆＃39;（

Answer 1

getElementsByClassname将从那里返回一个可迭代的node list（类似数组的对象），您可以使用for循环遍历列表以应用您可能需要的任何事件侦听器。

如果您确定只需要支持更新的浏览器，那么您也可以使用forEach来遍历节点列表，但要从MDN中提取引用：

虽然NodeList不是数组，但可以使用forEach（）对其进行迭代。它也可以使用Array.from（）转换为数组。

然而，一些较旧的浏览器尚未实现   NodeList.forEach（）和Array.from（）。但这些限制可以   通过使用Array.prototype.forEach（）来规避（更多内容   文件）。

(function() {
  
  // Get your node list
  const elements = document.getElementsByClassName('hover')
  
  // iterate through using a loop
  for (let i = 0, len = elements.length; i < len; i++) {
    // add mouseover event to given element index
    elements[i].addEventListener('mouseover', e => { 
      e.target.classList.remove('w3-black');
      e.target.classList.add('w3-teal');
    });
    // add mouseout event to given element index
    elements[i].addEventListener('mouseout', e => { 
      e.target.classList.remove('w3-teal');
      e.target.classList.add('w3-black');
    });
  }
 
})();

.w3-teal { background-color: teal; }
.w3-black { background-color: black; }

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover"> 
      HOVER TO MAKE ME TEAL
  </div>
</div>

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover">
      HOVER TO MAKE ME TEAL
  </div>
</div>

<div class="w3-display-container mySlides">
  <img src="yellow.png" style="width:100%">
  <div class="w3-display-middle w3-large w3-container w3-padding-16 w3-black hover">
      HOVER TO MAKE ME TEAL
  </div>
</div>

Answer 2

var hover = document.querySelectorAll('.hover');

hover.forEach(e => e.addEventListener("mouseover", () => mouseOver(e)));
hover.forEach(e => e.addEventListener("mouseout", () => mouseOut(e)));

function mouseOver(e) {
    e.classList.remove("w3-black");
    e.classList.add("w3-teal");
}

function mouseOut(e) {
    e.classList.remove("w3-teal");
    e.classList.add("w3-black");
}

DEMO：https://jsfiddle.net/Lahcj936/

JS如何处理getElementsByClassName迭代？

2 个答案: