如何循环遍历 foreach() 中的元素

Question

我基本上是在尝试循环通过我已经使用 querySelectorAll 选择的链接，它在 forEach 方法中运行，该方法还循环通过框列表。 不幸的是，我仍然无法解决代码的第二部分（循环通过链接节点列表）。 代码的简单总结是这样的：

const link = document.querySelectorAll('.link')
const box = document.querySelectorAll('.box')



box.forEach((singleBox) => {
    singleBox.addEventListener("mouseenter", () => {
        link[].classList.add('top'); // I know I need to use a for loop here to loop between link node list, but i'm still unable to find out the way :(
    });
    singleBox.addEventListener("mouseleave", () => {
        link[].classList.remove("top");
    });
});

.box {
      position: relative;
      width: 30rem;
      height: 25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 1s ease-out;
 }
   
.img-holder {
      background: #fff;
      width: 18rem;
      height: 18.8rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
  }

.link {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -35;
}
        
.top {
    z-index: 35;
    cursor: pointer;
    transition: all .5s ease-in;
    background-color: red; // Changing he bg-color just for visualizing whats going on //
}

/* first box I'm looping through (using foreach) */
<div class="box">
    <a href="#" class="link"></a> /* first link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>

/* second box I'm looping through (using foreach) */

<div class="box">
    <a href="#" class="link"></a> /* second link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>
            

Answer 1

您可以获得.links 每个框，如下所示：

const box = document.querySelectorAll('.box');



box.forEach((singleBox) => {
  let boxLinks = singleBox.querySelectorAll('.link');
    singleBox.addEventListener("mouseenter", () => {
      boxLinks.forEach(boxLink => {
        boxLink.classList.add('top');
      });
     
    });
    singleBox.addEventListener("mouseleave", () => {
      boxLinks.forEach(boxLink => {
        boxLink.classList.remove('top');
      });
    });
});

.box {
      position: relative;
      width: 30rem;
      height: 25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 1s ease-out;
 }
   
.img-holder {
      background: #fff;
      width: 18rem;
      height: 18.8rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
  }

.link {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -35;
}
        
.top {
    z-index: 35;
    cursor: pointer;
    transition: all .5s ease-in;
    background-color: red; // Changing he bg-color just for visualizing whats going on //
}

/* first box I'm looping through (using foreach) */
<div class="box">
    <a href="#" class="link"></a> /* first link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>

/* second box I'm looping through (using foreach) */

<div class="box">
    <a href="#" class="link"></a> /* second link */
    <div class="img-holder">
      <img src="" alt="image">
      <img src="" alt="another image">
    </div>
</div>