Zmiana wyglądu elementu po kliknięciu

Zmiana wyglądu elementu po kliknięciu
Dodano: Styczeń 22 2018

Jak sprawić żeby dany element po kliknięciu zmienił wygląd (swój bądź innego elementu)? (Hamburger menu część 1)

Ok naszym zadaniem jest stworzyć prosty skrypt który w sposób uniwersalny sprawi że po kliknięciu przycisku zmieni on wygląd. Może on wpłynąć na wygląd innego elementu lub swój własny. Skrypt nie musi być specjalnie zoptymalizowany, zależy nam na tym aby przyśpieszył on programowanie i był możliwy do wykorzystania w wielu małych projektach. Zerknijcie na obrazek.
1) 3 elementy - wygląd domyślny
2) klikam na pierwszy ielement i do trzeciego elementu dodaje się klasa zmieniająca kolor tła na czerwony
3) klikam na drógi element i jako że nie ma on określonego celu dodaje klasę sam do siebie
4) klikam po raz kolejny i klasa znika z elementu
5) klikam na element pierwszy i klasa znika z elementu trzeciego. 

Oczywiście nie musimy za każdym razem mieć wszystkich elementów. Skrypt ma być na tyle uniwersalny żeby po jednym kliknięciu dodawał klasą po kolejnym usuwał, w zależności od tego czy ma podany cel to danemu celowi lub sam sobie. Odpalamy go raz i resztę robimy z html dodając lub nie odpowiednie atrybuty.

Skrypt idzie zrobić na conajmniej 50 sposobów, ja wybrałem ten w miare przejrzysty i prosty. Można lepiej, można gorzej, jak zwykle czekam na Wasze sugestie na grupie FB

PS: Ten skrypt będzie pierwszym krokiem do zrobienia Hamburger Menu. Niedługo kolejne kroki :)

  • data-COKOLWIEK jest przydatnym atrybutem w pracy z jQuery do przechowywania interesujących nas danych
  • $('[data-zmiana]').on('click',function(){ /*KOD*/ }) pozwoli nam nałożyć nasłuchiiwacz na wszystkie elementy posiadajace atrybut data-zmiana
  • Nie zapomnij o podpięciu jQuery aby ułatwić sobie pracę. Można to zrobic w czystym JavaScript ale się napocicie odrobinę więcej.
  • Jeżeli element nie posiada celu sam dla siebie stanie się celem w ten magiczny sposób: 
    var cel = $(this).data('cel'); if(!cel){ cel=this; }
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.