Javascript / jquery niedziałająca funkcja bez błędów

Question

Witam, mam następujący kod:

window.addEventListener('load', wczytanie);
var ajdi = "";
var ajdi2 = "";
function wczytanie()
{
	$('.menu_bok').click(function()
	{
		ajdi = $(this).attr('id');
		ajdi2 = "#"+ajdi;
	});
	$(ajdi2).css("background-color","red");
	$(ajdi2).css("color","white");
	$(".menu_bok:not(ajdi2)").css("background-color","rgb(157, 168, 168)");
	$(".menu_bok:not(ajdi2)").css("color","black");
}

Nie wyskakują żadne błędy w przeglądarce, w menu_bok wywoływana jest funkcja "wczytanie", przy alercie poprawnie pokazuje zmienne, lecz ostatnie 4 linijki funkcji nie działają. O co chodzi? Czy na przykład w jQuery nie można dać $(tutaj) nazwy zmiennej czy jak? Przy wpisywaniu konkretnego id $(tutaj) prawidłowo podmienia kolory. Prosiłbym o wyjaśnienie.

Comments

Nie wiem co to za bład, ale proszę... nie ucz się JQuery w 2021 jeśli nie musisz :)

---

Dlaczego nie powinienem się go uczyć? Czy jest jakiś nowszy, lepszy i łatwiejszy do nauki odpowiednik? Ponieważ u pana Mirosława Zelenta słyszałem, że jest to dobry język, lecz poradnik jest sprzed paru lat i może się coś zmieniło. I czy da się np. zrobić automatyczny animowany slider ze zdjęciami w samym javasripcie?

---

https://www.youtube.com/watch?v=JoUrZlcdoFw

Answer 1

Można dać, tylko że Ty nie dałeś ;) W Twoim kodzie ajdi2 jest traktowane jako string. Musisz użyć albo template literals, albo konkatenacji stringów:

// Template literals.
`.menu_bok:not(${ ajdi2 })`

// Konkatenacja
".menu_bok:not(" + ajdi2 + ")"

To jeden błąd. Drugi związany jest z tym, kiedy są wywoływane te 4 linijki: od razu, gdy zachodzi zdarzenie load. A wartość zmiennej ajdi2 jest nadawana dopiero po kliknięciu. Powinieneś przenieść te 4 linijki do środka click, żeby się odpalały przy każdym.