Efekt na więcej niż jednym elemencie

Question

Cześć, jestem początkujący i mam takie pytanie.

Stworzyłem sobie 3 divy - każdy z nich ma tekst. Chciałbym, żeby w momencie kiedy kliknę w któryś zmieniało się tło, ale tylko dla tego w którego klikam. W tym momencie zrobiłem wszystko na IDkach więc jeśli kliknę np. w drugiego diva to kod wykonuje się na pierwszym. Jak rozwiązać taki problem?

Answer 1

Możesz dla tych divów nadać tą samą klasę i użyć querySelectorAll (tutaj będzie też potrzebna pętla by dla każdego elementu przypisać zdarzenie).

Pokaż również swój kod.

Answer 2

Możesz nadać wszystkim 3 divom tą samą klasę (załóżmy że .blok) i użyć kodu jquery w tym stylu:

$(".blok").click(function(){
      
       $(this).css({backgroundColor:"red"});

});

Comments

A co jeżeli nie chce korzystać z jQuery?

---

Jedna biblioteka do JS która wszystko zmienia, wszystkie rzeczy które już od podstaw były skomplikowane (np. wybranie elementu który chcesz), z JQuery stają się proste i logiczne.

Złapanie elementu w JS jest naprawdę skomplikowane?

Nie wiem. Jeśli coś da się łatwo zrobić w JQuery to nie potrafię (i nie potrzebuję) tego robić w JS, to tak jakby nie moja działka. Nie ma więc sensu żebym kombinował nad rozwiązaniem w nie swojej dziedzinie ;)

Moim zdaniem, zaczęcie nauki od biblioteki jaką jest jQuery to zaczynanie od dupy strony.

Zaraz to będą sami programiści jQuery a nie JavaScript.

---

@Spiral, mam nadzieję, że czytałeś choćby to: http://youmightnotneedjquery.com/

Uczę się czystego JavaScriptu od około roku i jak do tej pory napisałem może kilka linijek w jQuery (wpierw było to użycie $ajax(), a tak ogólnie korzystałem z tej biblioteki, gdy już była w kodzie podpięta - bo komuś tutaj na forum pomagałem).

Nie wiem, może to dlatego, że nie pisałem do tej pory jakiegoś super skomplikowanego kodu, ale uważam że zwłaszcza w małych aplikacjach nie ma zbytnio sensu podpinać jQuery. Moim zdaniem jQuery jest przydatne do tworzenia animacji, bo choćby .fadeIn()/.fadeOut() w czystym JS zajmuje dużo więcej linijek http://youmightnotneedjquery.com/#fade_in

Samo łapanie oraz wykonywanie operacji np. podpinania jednego i wielu elementów nie stanowi większego problemu - są przecież .querySelector()/.querySelectorAll().Prosty AJAX można zastąpić XHRem. Dodawanie/usuwanie klas w JS to kilka znaków w kodzie więcej jak w jQuery.

---

Należy zadać pytanie "Czy to że jquery nie jest wymagany oznacza że nie powinienem go używać?"

No nic, przeczytam to co podałeś. Może dowiem się czegoś nowego.

Answer 3

A nie lepiej użyć :active w css?  Dodajesz do każdego diva inną klasę i do niej active. 

PS. Sorry nie doczytałem, że to ma być cały czas a nie tylko na kliknięciu.