• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Javascript jedna funkcja dla kilku elementów

VPS Starter Arubacloud
0 głosów
988 wizyt
pytanie zadane 23 maja 2017 w JavaScript przez Damian13 Obywatel (1,430 p.)
zamknięte 23 maja 2017 przez Damian13

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 

komentarz zamknięcia: Wyjaśnione

3 odpowiedzi

+3 głosów
odpowiedź 23 maja 2017 przez Comandeer Guru (599,730 p.)
+1 głos
odpowiedź 23 maja 2017 przez pablop76 VIP (123,060 p.)

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);

 

+1 głos
odpowiedź 23 maja 2017 przez gremlin Dyskutant (7,600 p.)

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);
}

 

komentarz 23 maja 2017 przez Strategiusz Dyskutant (9,220 p.)
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

Podobne pytania

0 głosów
1 odpowiedź 264 wizyt
pytanie zadane 6 maja 2018 w JavaScript przez jaku9987 Nowicjusz (180 p.)
0 głosów
1 odpowiedź 91 wizyt
pytanie zadane 15 czerwca 2015 w Java przez Dissio Mądrala (5,830 p.)
+1 głos
1 odpowiedź 489 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...