OnClick JavaScript

Question

Hejka potrzebuję waszej pomocy, dopiero zaczynam poznawać Js i chciłem na start stworzyć ulotkę z małą strzałką po jej naciśnięciu rozwija się div a w tym divie druga strzałka po, której naciśnięciu div chowa się, Chcę to zrobić na takiej zasadzie:

 
 

$('.tile').click(function(){
  $('.tile').css("height","450px");
});

 

Lecz to działa gdy naciśnę na diva a ja potrzebuję w nim umieścić np button'a i po jego klikaniu dzieje się przejście dla jego rodzica. :) jak to zrobić? :D

Answer 1

http://codepen.io/PatrykTal/pen/EVwPpJ → dobrze kombinujesz, ale nie wpadłeś na to, że istnieje tzw. event bubbling: http://www.quirksmode.org/js/events_order.html

W skrócie: najpierw wywoływany jest klik na przycisku, a później na jego rodzicu - stąd wysokość diva zmieniana jest na 20px i od razu na 450px.

Dlatego proponuję zapoznać się z tzw. event delegation: http://codepen.io/Comandeer/pen/ojGxYz

Comments

Coś tam podłapałem:

http://codepen.io/PatrykTal/pen/EVwPpJ/

Dzięki:)

Answer 2

No to przyciskowi wewnątrz diva nadaj jakąś klasę $('.klasaButtona').click() A nastepnie odwołaj się do rodzica tego przycisku metodą parent();

Coś mniej więcej takiego:

$('.klasaButtona').click(function(){
  $(this).parent('.tile').css("height","450px");
});

 

Comments

Zerkniesz?

 

http://codepen.io/PatrykTal/pen/EVwPpJ

Answer 3

To umieść w tym divie tego buttona nadaj mu jakąś klasę, albo id, no i w jQuery odwołuj się do tego buttona, a nie do diva.