Почему не работает код (css, js)

Question

Если я вручную добавляю события к элементам, то всё работает, а если засовываю это в цикл(внизу закомментировано), то всё перестаёт работать.

let mainItems = document.querySelectorAll(".item-with-subitems");





mainItems[0].addEventListener("mouseenter", function(){

    mainItems[0].children[0].style.display = "block";
 
});

mainItems[0].addEventListener("mouseleave", function(){

    mainItems[0].children[0].style.display = "none";
 
});


mainItems[1].addEventListener("mouseenter", function(){

    mainItems[1].children[0].style.display = "block";
 
});

mainItems[1].addEventListener("mouseleave", function(){

    mainItems[1].children[0].style.display = "none";
 
});



/* 
for (i=0; i<mainItems.length; i++) {

    mainItems[i].addEventListener("mouseenter", function(){

        mainItems[i].children[0].style.display = "block";
     
    });
    
    mainItems[i].addEventListener("mouseleave", function(){
    
        mainItems[i].children[0].style.display = "none";
     
    });


}


 */

body {
  
  margin: 0px; 
  padding: 20px;
  background: rgb(216, 216, 216);

}

.item-with-subitems {

  width: 200px;
  height: 100px;
  box-sizing: border-box;
  background-color: rgb(180, 1, 1);
  position: relative;
  border: 1px solid black;
  text-align: center;
  padding: 35px;
  

}


.item {

  width: 200px;
  height: 100px;
  box-sizing: border-box;
  background-color: rgb(180, 1, 1);
  border: 1px solid black;
  text-align: center;
  padding: 35px;
  

}


.container-with-subitems {
position: absolute;
left: calc(100% + 1px);
top: -1px;
display: none;

}

<!DOCTYPE html>
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" type="text/css" href="atest.css" />
      <title></title>
   </head>
   <body>
      <div class="item-with-subitems"> 
         Main item 1.
         <div class="container-with-subitems">
            <div class="item">Subitem 1</div>
            <div class="item">Subitem 2</div>
            <div class="item">Subitem 3</div>
         </div>
      </div>
      <div class="item-with-subitems"> 
         Main item 2.
         <div class="container-with-subitems">
            <div class="item">Subitem 1</div>
            <div class="item">Subitem 2</div>
            <div class="item">Subitem 3</div>
         </div>
      </div>

      
   
      <script src="atest.js"> </script>
   </body>
</html>

Answer 1

Попробуй использовать метод forEach вместо цикла for

const mainItems = document.querySelectorAll(".item-with-subitems");

[...mainItems].forEach((item) => {

  item.addEventListener("mouseenter", function(){
    item.children[0].style.display = "block";
  });

  item.addEventListener("mouseleave", function(){
    item.children[0].style.display = "none";
  });

})

БЛОГ НА HUSL

Почему не работает код (css, js)

Ответы (1 шт):