Forum PHP.pl > [JavaScript][jquery] Problem z (hide)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][jquery] Problem z (hide)

zanst

26.09.2017, 14:57:02

Dopiero zacząłem uczyć się jQuery i z pewnością to banalny problem, niemniej jednak chciałbym zrozumieć czemu to działa źle. Mam taki oto kod:
HTML:

[HTML] pobierz, plaintext 
<body>
    <div id="guzik">Menu</div>
    <div style="width: 100px; height: 100px; background-color: red;" class="menu"></div>
 
</body>
[HTML] pobierz, plaintext

jQuery:

[HTML] pobierz, plaintext 
$(function(){
    $('.menu').hide();
 
    $('#guzik').click(function(){
                $('.menu').show();
        $('#guzik').addClass('showed');
    });
      $('#guzik.showed').click(function() {
        $('.menu').hide();
        $('#guzik.showed').removeClass('showed');
    }) ;   
 
 
}
 );
[HTML] pobierz, plaintext

Po kliknięciu na napis Menu ma się pokazać czerwony kwadrat - pokazuje się. Po ponownym kliknięciu na napis Menu kwadrat ma się chować - nie działa, zostaje na ekranie. Co jest nie tak?

nospor

26.09.2017, 14:59:08

$('#guzik.showed').click(function() - ten kod odpala sie gdy guzik nie ma jeszcze klasy showed wiec sie nie lapie do twojej reguly.
Zainteresuj sie ON

trueblue

26.09.2017, 14:59:15

Podpiąłeś zdarzenie click do elementu kiedy jeszcze nie ma klasy showed.
Obsługa zdarzenia ma być jedna, a w niej sprawdzenie czy element ma klasę, nadanie/usunięcie klasy oraz schowanie/pokazanie elementu.

nospor

26.09.2017, 14:59:59

ps: a czemu w ogole nie zrobisz poprostu toggle?

$('#guzik').click(function(){
$('.menu').toggle();
});

I juz

zanst

26.09.2017, 15:05:01

Dzięki za pomoc. Toggle() nie użyłem bo go do tej pory nie znałem - po prostu uczę się z książki i chciałem spróbować już coś zrobić z tego co jest na jej początku. Teraz przeczytam ją do końca i wtedy będę próbował coś pisac

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.