Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS] Problem z dynamicznym drzewem MENU
Forum PHP.pl > Forum > Po stronie przeglądarki
Sokrates
Witam, mam taki dość dziwaczny problem.
A mianowicie mam MENU które jest w liście wypunktowanej, i teraz jak kliknę w jakiś odnośnik
pobieram AJAXem dane i wyświetlam je obok menu w panelu.

Problem w tym ze po takim kliknięciu odnośnik powinien się zmienić (dostać klase)

Robie to w ten sposób że do znacznika 'a' przypisuję funkcję która powinna przelecieć całe drzewo
MENU i jeśli gdzieś (w jakimś znaczniku 'a') jest ustawiona klasa (class="active") to usuwa ją , a następnie
po tej pętli powinien nadać konkretnemu elementowi klasę (class="active").
Jednak za żadne skarby nie mogę tej klasy nadać, wyświetla mi że obiekt niezdefiniowany.

To jest kod mojego menu oraz funkcji w JavaScript która to obsługuje:
  1. <ul id="tree" class="tree">
  2. <li class="kategorie">
  3. <a class="folder">Menu</a>
  4. <ul>
  5. <li class="kategorie">
  6. <a href="javascript:treeHover(this); setContent(0, 0, 'addNew', 2);">Dodaj Menu</a>
  7. </li>
  8. <li class="kategorie">
  9. <a href="javascript:treeHover(this); setContent(0, 0, 'sysManager', 3);">Manager Menu</a>
  10. </li>
  11. </ul>
  12. </li>
  13. </ul>
  14.  
  15. //////////////////////////////////////////////////////////////////
  16.  
  17. function treeHover(hover)
  18. {
  19. var tree = document.getElementById('tree');
  20. var el = tree.getElementsByTagName('a');
  21. for (var i = 0; i < el.length; i++)
  22. {
  23. el_node = el.childNodes.item(i);
  24. if (el_node.nodeName.toLowerCase() == 'a')
  25. {
  26. if (el[i].className.toLowerCase() == 'active')
  27. {
  28. el[i].className = '';
  29. }
  30. }
  31. }
  32. hover.className = 'active';
  33. }


A tu zobrazowałem jak to wygląda , żeby lepiej mnie było zrozumieć:


Może ktoś wpadnie na coś. Może to jakaś błahostka, ja nad tym siedzę już cały dzień.
Jak będzie ktoś coś jeszcze potrzebował to służę uprzejmie - może rozwiążemy to.

Dzięki za pomoc, pozdrawiam.
lord_t
CZy tak:>?
Kod
function treeHover(hover)
{
var tree = document.getElementById('tree');
var el = tree.getElementsByTagName('a');
for (var i = 0; i < el.length; i++)
{
  if(el[i].className=='active') {
   el[i].className='';
   break;
   }
}
hover.className = 'active';
}
Sokrates
Cytat(lord_t @ 6.08.2008, 21:18:46 ) *
CZy tak:>?
Kod
function treeHover(hover)
{
var tree = document.getElementById('tree');
var el = tree.getElementsByTagName('a');
for (var i = 0; i < el.length; i++)
{
  if(el[i].className=='active') {
   el[i].className='';
   break;
   }
}
hover.className = 'active';
}


To nic nie wnosi do sprawy...
1) Nie mogę przerwać petli jak znajdzie znacznik/noda który ma klasę 'active',
bo może zdarzyć się tak że niżej w drzewie DOM jakiś inny znacznik będzie miał
taka samą klasę , a ja w tej pętli chcę oczyścić całe drzewo MENU z klasy 'active',
(wszystkie znaczniki).
2) przy IF w pętli FOR musi być argument toLowerCase(),
bo np IE 7 pisze klasy dużymi literami.
3) sprawa usuwania klas jest załatwiona, działa poprawnie,
problem dotyczy nadawania klasy elementowi który nie posiada
atrybutu ID ani NAME. U siebie załatwiam to tak że w znaczniku 'a'
wywołuje funkcję treeHover(this), gdzie 'this' powinien przyjąć wartość
podanego elementu. Jedank chyba tak nie jest bo jak wywołuję w funkcji
przekazany argument 'this' jako 'hover' np tak alert(hover.href); albo
alert(hover.id) -> predzej nadając elementowi jakąś wartość ID , zawsze wyświetla mi
'undefine'. Być może sprawa jeszcze dotyczy zakresu działania/ograniczeni zmiennych
ale wydaje mi śie że argument przekazany jak 'this' z linku który trafia do funkcji jako
'hover' ma zasięg globalny.

Pozdrawiam,
Czekam na dalsze sugestie....
lord_t
Ad 1) ,2)
Tu wiesz co robić:)

Ad 3)
-Zamień <a ...></a> na np. <span ....></span>
-i nadaj onclick="funkcja(this)" zamiast w hrefie (w a)
Sokrates
Cytat(lord_t @ 6.08.2008, 22:19:21 ) *
Ad 3)
-Zamień <a ...></a> na np. <span ....></span>
-i nadaj onclick="funkcja(this)" zamiast w hrefie (w a)


:-)

I tu pewnie masz racje (choć tego konkretnego przypadku nie sprawdzałem),
bo wstawiłem w znaczniku wyżej 'li' funkcje treeHover(this) wywoływaną przez onclick
oraz lekko zmieniłem koniec funkcji treeHover(hover).

Dokładnie wyglądało to tak:
  1. <ul id="tree" class="tree">
  2. <li class="kategorie">
  3. <a class="folder">Menu</a>
  4. <ul>
  5. <li class="kategorie" onclick="treeHover(this);">
  6. <a href="javascript: setContent(0, 0, 'addNew', 2);">Dodaj Menu</a>
  7. </li>
  8. <li class="kategorie" onclick="treeHover(this);">
  9. <a href="javascript: setContent(0, 0, 'sysManager', 3);">Manager Menu</a>
  10. </li>
  11. </ul>
  12. </li>
  13. </ul>
  14.  
  15. ////////////////////////////////////////////////////////
  16.  
  17. function treeHover(hover)
  18. {
  19. var tree = document.getElementById('tree');
  20. var el = tree.getElementsByTagName('a');
  21. for (var i = 0; i < el.length; i++)
  22. {
  23. el_node = el.childNodes.item(i);
  24. if (el_node.nodeName.toLowerCase() == 'a')
  25. {
  26. if (el[i].className.toLowerCase() == 'active')
  27. {
  28. el[i].className = '';
  29. }
  30. }
  31. }
  32. var el_node = hover.childNodes.item(1);
  33. if (el_node.nodeName.toLowerCase() == 'a')
  34. {
  35. el_node.className = 'active';
  36. }
  37. }


Jednak IE tego nie interpretuje.

Może ktoś wie dlaczego wartość 'this' która jest przekazywana do
funkcji treeHover(this); nie działa w znaczniku 'a'?
A w innych znacznikach działa? To jest ciekawe...
lord_t
Nie działa bo masz to w href. Jak dla a dasz onclick to zadziała. Napisałem, żeby zamienić na span bo

  1. <a href="" onclick="...">...</a>
nie ma sensu.

W ogóle jakby się zastanowić to po co Ci tam to a? Oprzyj się na li.


Nie analizowałem czemu Twój poprawiony kod nie działa.
Sokrates
Wielkie dzięki za pomoc...
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.