Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Pobranie i zwrócenie klasy
Forum PHP.pl > Forum > Przedszkole
php11
Mokrego Dyngusa!!!

;-)


Mam dwie listy (ul class="aaaaa" oraz ul class="bbbbb"), których elementy li mają identyczne klasy.
Chciałbym, by po najechaniu myszą na jeden element listy do bliźniaczego dodała się klasa hover.

Umiem to zrobić oddzielnie dla każdego elementu, ale nie za bardzo to eleganckie :-D

To jest pewnie kod wyjściowy (hover dodawany jest do wszystkich li)...

  1.  
  2. $(document).ready(function(){
  3. $(".aaaaa li").hover(function() {
  4.  
  5. $(".bbbbb li").addClass('hover');
  6. }, function(){
  7. $('.bbbbb li').removeClass('hover');
  8.  
  9. });
  10. });
  11. });
  12.  


Klasę chyba nie do końca pobieram dobrze - w konsol tworzy się wiele duplikatów.

  1.  
  2. $(document).ready(function(){
  3. $(".aaaaa li").hover(function() {
  4.  
  5.  
  6. var klasa = $(this).attr('class');
  7. console.log( klasa );
  8.  
  9.  
  10. $(".bbbbb li").addClass('hover');
  11. }, function(){
  12. $('.bbbbb li').removeClass('hover');
  13.  
  14. });
  15. });
  16. });
  17.  
  18.  



Ale i tak nie potrafię jej poprawnie dopisać :-)

Dzięki

php11
Dziękuję za odpowiedź, bardzo mi pomogła.

Ponieważ muszę dodać klasę hover do drugiej listy, zrobiłem:

  1. $(".bbbbb li").mouseover(function(){
  2. $('.'+this.className+'').addClass('hover');
  3. });
  4.  
  5. $(".bbbbb li").mouseout(function(){
  6. $('.'+this.className+'').removeClass('hover');
  7. });
  8.  


Po najechaniu jest ok, ale gdy zjadę myszą klasa hover niestety zostaje w elemencie.


p.s. Patrząc na Twój kod: po zabraniu myszy znad Li białe tło pozostaje.
Star
pokaz kod css od tej klasy hover
php11
Nie chodzi o nazwę klasy.

Po zabraniu myszy znad elementu zostaje w Twoim przykładzie białe tło, a nie powinno być tła w ogóle.


Dzięki za pomoc.

Star
bo w moin przykladzie zmieniam tlo na biale :

  1. $('.'+this.className+'').css("background-color", "white");
php11
No tak, faktycznie :-)
U Ciebie to działa, a ja chcę usunąć klasę hover po zabraniu myszy znad Li.
To nie działa:

  1. $(".bbbbb li").mouseover(function(){
  2. $('.'+this.className+'').addClass('hover');
  3. });
  4.  
  5. $(".bbbbb li").mouseout(function(){
  6. $('.'+this.className+'').removeClass('hover');
  7. });

Star
zobacz ten kod :
  1. $(".aaaaa li").mouseover(function(){
  2. var x = this.className;
  3. var y = document.getElementsByClassName(x).length;
  4. for (i = 0; i < y; i++) {
  5. document.getElementsByClassName(x)[i].className = document.getElementsByClassName(x)[i].className + ' hover';
  6. }
  7. });
  8.  
  9. $(".aaaaa li").mouseout(function(){
  10. var x = this.className;
  11. var y = document.getElementsByClassName(x).length;
  12. for (i = 0; i < y; i++) {
  13. var newArray = document.getElementsByClassName(x)[i].className.split(" ");
  14. document.getElementsByClassName(x)[i].className = newArray[0];
  15. }
  16. });
  17.  
  18. $(".bbbbb li").mouseover(function(){
  19. var x = this.className;
  20. var y = document.getElementsByClassName(x).length;
  21. for (i = 0; i < y; i++) {
  22. document.getElementsByClassName(x)[i].className = document.getElementsByClassName(x)[i].className + ' hover';
  23. }
  24. });
  25.  
  26. $(".bbbbb li").mouseout(function(){
  27. var x = this.className;
  28. var y = document.getElementsByClassName(x).length;
  29. for (i = 0; i < y; i++) {
  30. var newArray = document.getElementsByClassName(x)[i].className.split(" ");
  31. document.getElementsByClassName(x)[i].className = newArray[0];
  32. }
  33.  
  34. });

'
pisalem z telefonu i nie mialem jak sprawdzic al powinno byc ok
php11
Bardzo dziękuję, w życiu bym nie wyskrobał czegoś takiego na telefonie...

Twój kod czyści klasę hover, ale tylko w liście, nad którą jest kursor, a zależy mi na tej drugiej liście właśnie.
Czyli to, ale działające dla listy bbbbb.

  1. $(".aaaaa li").mouseout(function(){
  2. var x = this.className;
  3. var y = document.getElementsByClassName(x).length;
  4. for (i = 0; i < y; i++) {
  5. var newArray = document.getElementsByClassName(x)[i].className.split(" ");
  6. document.getElementsByClassName(x)[i].className = newArray[0];
  7. }
  8. });


Jeszcze raz bardzo dziękuję :-)


p.s. Ja to sobie myślałem, że wystarczy jakiś "prosty" if else...

Znalazłem kod, który dodaje i usuwa klasę, ale nie potrafię przerobić go, by to robił w bliźniaczej, tej drugiej liście...

  1. $('.aaaaa li').hover(function (){
  2. $(this).addClass("hoveredClass");
  3. },function(){
  4. $(this).removeClass("hoveredClass");
  5. });
  6.  
Star
mam, wystarczylo zdefiniowac zmienna globalna

https://jsfiddle.net/gkkw9w7r/3/
php11
Jesteś wielki :-)

Baaaaaaardzo dziekuję

:-)
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.