Javascript jedna funkcja dla kilku elementów

Question

Witajcie. Sprawa wygląda tak. Mam

<div class="container">
    <div class="project">
       <img>
    </div>
    <div class="project">
       <img>
   </div>
   <div class="project">
       <img>
   </div>
   <div class="project">
       <img>
   </div>
</div>

Po najechaniu na img zdjęcie animuje je i przesuwa się w dół aż do końca. Zrobiłem to w jQuery. Ale chce zrobić w czystym JS.

Samą animacje zrobiłem tylko chodzi mi o to jak moją funkcję slideDown() przypisać po najechaniu na każdy element z osobna ? W jQuery po prostu jest $(this). A w JS? Sorry jeśli newbie 

Answer 1

Event delegation.

Answer 2

Witam. A w js jest pętla.

<div class="container">
    <div class="project">
       <img>
    </div>
    <div class="project">
       <img>
   </div>
   <div class="project">
       <img>
   </div>
   <div class="project">
       <img>
   </div>
</div>
<button id="button">pokaz</button>

body{
  background-color: black;
}
.project{
  width: 100px;
  height: 0px;
  background-color: blue;
  margin: 3px;
  transition: height 1s;
}

function pokaz(){
  var x = document.getElementsByClassName("project"); 
  for(var i=0; i<x.length; i++)
    x[i].style.height="100px";
}

var el = document.getElementById("button"); 
el.addEventListener("click", pokaz);

 

Answer 3

Po najechaniu na img tak? To musisz w pierwszej kolejności je wszystkie złapać, ja bym to zrobił przy pomocy klasy.

var images = document.getElementsByClassName('images');

Następnie musisz dla każdego z nich przypisać zdarzenie mouseover, ja bym to zrobił z pomocą zwykłej pętli for

for(var i=0; i< images.length ; i++){
   var img = images[i];
   img.addEventListener("mouseover", slideDown, false);
}

 

Comments

To nie jest zalecana metoda  dla dużej ilości elementów. Zalecany sposób to napisanie jednego listenera i dołączenie go do elementu, który jest rodzicem wszystkich elementów docelowych. W nim można obsłużyć "prawdziwy" element docelowy za pomocą event.target.

Bardzo dobrze jest to wyjaśnione tu https://www.kirupa.com/html5/event_capturing_bubbling_javascript.htm i tu https://www.kirupa.com/html5/handling_events_for_many_elements.htm