[JavaScript][CSS] Problem z dynamicznym drzewem MENU, Problem z nadaniem klasy po kliknięcu w odnośnik menu Opcje

[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:

[HTML] pobierz, plaintext 
<ul id="tree" class="tree">
        <li class="kategorie">
		<a class="folder">Menu</a>
		 <ul>
			<li class="kategorie">
			       <a href="javascript:treeHover(this); setContent(0, 0, 'addNew', 2);">Dodaj Menu</a>
			</li>
			<li class="kategorie">
                                <a href="javascript:treeHover(this); setContent(0, 0, 'sysManager', 3);">Manager Menu</a>
                       </li>
		</ul>
	</li>
</ul>
 
//////////////////////////////////////////////////////////////////
 
function treeHover(hover)
{
	var tree = document.getElementById('tree');
	var el = tree.getElementsByTagName('a');
	for (var i = 0; i < el.length; i++)
       {
      	   el_node = el.childNodes.item(i);
       	   if (el_node.nodeName.toLowerCase() == 'a')
         	{
      		      if (el[i].className.toLowerCase() == 'active')
        	      {
        		    el[i].className = '';
        		}
        	 }
        }
    hover.className = 'active';  
}
[HTML] pobierz, plaintext 

A tu zobrazowałem jak to wygląda , żeby lepiej mnie było zrozumieć:
(IMG:http://users.finemedia.pl/marcinlis/blad_menu.jpg)

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]

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]

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:

[HTML] pobierz, plaintext 
<ul id="tree" class="tree">
        <li class="kategorie">
                <a class="folder">Menu</a>
                <ul>
                         <li class="kategorie" onclick="treeHover(this);">
                                  <a href="javascript: setContent(0, 0, 'addNew', 2);">Dodaj Menu</a>
                         </li>
                          <li class="kategorie" onclick="treeHover(this);">
                                  <a href="javascript: setContent(0, 0, 'sysManager', 3);">Manager Menu</a>
                           </li>
                 </ul>
          </li>
</ul>
 
////////////////////////////////////////////////////////
 
function treeHover(hover)
{
       var tree = document.getElementById('tree');
       var el = tree.getElementsByTagName('a');
       for (var i = 0; i < el.length; i++)
      {
            el_node = el.childNodes.item(i);
            if (el_node.nodeName.toLowerCase() == 'a')
           {
                  if (el[i].className.toLowerCase() == 'active')
                  {
                          el[i].className = '';
                   }
            }
       }
       var el_node = hover.childNodes.item(1);
       if (el_node.nodeName.toLowerCase() == 'a')
       {
      	       el_node.className = 'active';
       }
}
[HTML] pobierz, plaintext 

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...

Ten post edytował Sokrates 7.08.2008, 07:59:51

[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

[HTML] pobierz, plaintext 
<a href="" onclick="...">...</a>
[HTML] pobierz, plaintext 

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...