• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Funktion nur einmal verwenden (Komplexes Problem, Lsg. gesucht)

Status
Für weitere Antworten geschlossen.
Y

yss

Mitglied
Hey,
heute habe ich ein sehr komplexes Problem:
Ich bin gerade dran ein kleines Framework für das iPhone zu programmieren, Css ist garkein Problem, geht alles doch die Umsetzung mit dem JavaScript geht noch nicht so ganz.
Das ganze sieht wie folgt aus:
Am Anfang sind alle Divs 'hidden', nur das Div mit der id 'home' wird per JS sichtbar gemacht. Wenn nun ein User in einer Liste auf ein Bereich draufdrückt, startet eine Funktion, welche vom gedrückten Div die Parameter 'id' und 'title' ausliest. Die 'id' sagt, welches Div versteckt werden soll, also das aktuelle und 'title' sagt, welches nun erscheinen soll. Das ganze funktioniert perfekt. Aber: Da die 'list'-divs in einem Div names 'listview' sind und eigentlich das übergeordnete Div versteckt werden soll (eigentlich würde die das Script ja dann den Listeneintrag verstecken) rufe ich mit 'parentNode' die id des 'listview' ab und setzte die id von allen Listenelementen eben auf die id des übergeordneten Divs(da ja das Script die id wissen will um es zu verstecken). Das funktioniert aber nur, wenn ich eine Liste habe. Bei einer zweiten nimmt das Script die id des ersten übergeordneten Divs und setzt sie nun im ganzen Code ein, aber eigentlich sollte es ja nur für die List-Elemente des 'listview's gelten. Wie mache ich es, dass das Script die id nur in 'listview' verwendet und z.B. bei 'listview2' die id nimmt und alle List-Elemente in 'listview2' mit dieser id bestückt?
Hier der JavaScript-Code:
HTML: 
function setonclick(){
	if(document.getElementsByClassName('whiteitem').length !== 0){
	var whiteitem = document.getElementsByClassName('whiteitem');
	var whiteitemparent = whiteitem[0].parentNode.id;
	for(i=0;i<whiteitem.length;i++) {  
        whiteitem[i].onclick = function(){
        	goto(this);
        };
        whiteitem[i].id = whiteitemparent;  
    } }
    
    if(document.getElementsByClassName('grayitem').length !== 0){
	var grayitem = document.getElementsByClassName('grayitem');
	var grayitemparent = grayitem[0].parentNode.id;
	for(i=0;i<grayitem.length;i++) {  
        grayitem[i].onclick = function(){
        	goto(this);
        };
        grayitem[i].id = grayitemparent;  
    } }
    
     if(document.getElementsByClassName('blackitem').length !== 0){
	var blackitem = document.getElementsByClassName('blackitem');
	var blackitemparent = blackitem[0].parentNode.id;
	for(i=0;i<blackitem.length;i++) {  
        blackitem[i].onclick = function(){
        	goto(this);
        };
        blackitem[i].id = blackitemparent;  
    } }

}

function goto(node){
			var div = node.id;
			var change = node.title;
			var title = node.title;
			
			document.getElementById('puffer').title = title;
			document.getElementById(div).style.visibility = 'hidden';
			document.getElementById(change).style.visibility = 'visible';
			}
Hier der HTML-Code:
HTML: 
 <div class="contentview">
    		<div class="listview" id="home" name="Home">
    			<div class="whiteitem" title="store">
    				Store
    			</div>
    			<div class="grayitem" title="testhome">
    				Hallo2
    			</div>
    			<div class="blackitem">
    				Hallo3
    			</div>
    		</div>
    		<div class="listview" id="testhome" name="Liste2">
    			<div class="whiteitem" title="podcast">
    				Halalaoa
    			</div>
    			<div class="grayitem">
    				Halalaoa
    			</div>
    			<div class="blackitem">
    				Halalaoa
    			</div>
    		</div>
    		<div class="storeview" id="store">
    			<div class="grayitem" title="home">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    			<div class="blackitem">
    				<img src="bilder/programme.png" alt="Limetlogo" />
    			</div>
    		</div>
    	</div>
 
1. Böse div Suppe. Wenns ne Liste ist. Wieso dann Divs?
2. Habs probietr durchzulesen. Aber meine Vorstellungskraft nimmt bei der Mitte ab und kommt nicht bis zum Ende :D
Für aufwendigere Probleme Helfen immer Screenshots oder Skizzen. Ich bitte dich so etwas zu machen. Thx :)
 
Ah ich ahbs verstanden. Musste das video nicht mal zu Ende gucken.
Alsooooo.
Du hast deine Links immer auf der selben Ebene?
heisst:

Menu->Link

Dein Ansatz war schon gut, aber nicht ganz durchdacht. Eine Id darf nur einmal vorkommen. Deswegen schonmal ne ganz böse Geschichte.

Du kannst es folgender Maßen machen:

Alle Menüs auf hidden

Klick auf Link der title menu2 hat sollte folgendes auslösen.

Code: 
function changeMenu() {
  // Jetziges Menü verstecken
   this.parentNode.className = "hiddenMenu";
  // Neues sichtbar machen
   document.getElementById(this.title).className = "visibleMenu";
}
Vorher musst du natürlich auf alle Links einen Eventhandler legen, der diese Funktion aufruft. Hoffe das hilft dir :)

Edit:

Hoffe es ist klar, dass in CSS die visibility gesetzt wird :D
 
Mal ein Doublepost. Wegen dem schönen Video war ich mal so frei dir das zu schreiben wie es aussehen könnte :D
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
      <style>
          .hiddenMenu {
              display: none;
          }
            
            .visibleMenu {
                display: block;
            }
      </style>
    <script>
        window.onload = function(){
                var listItems = document.getElementsByTagName("li");
                
                // Handler für jedes Listitem setzen
                for(var i=0; i < listItems.length; i++) {
                    listItems[i].onclick = changeMenu;
                }
            };
            
            
            function changeMenu() {
                this.parentNode.className = "hiddenMenu";
                document.getElementById(this.className).className = "visibleMenu";
            }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
  </head>
  <body>
      <ul id="menu1" class="visibleMenu">
          <li class="menu2">Menu2</li>
            <li class="menu3">Menu3</li>
      </ul>
        
        <ul id="menu2" class="hiddenMenu">
      <li class="menu1">Menu1</li>
      <li class="menu3">Menu3</li>
    </ul>
        
        <ul id="menu3" class="hiddenMenu">
      <li class="menu1">Menu1</li>
      <li class="menu2">Menu2</li>
    </ul>
  </body>
</html>
 
Erstmal vielen Dank. So ganz kapiere ich es noch nicht, mir ist aber gerade noch eine Idee gekommen:
Ich könnte doch per JS jedem List-Element eine id zuweisen, beim klicken diese Abfragen und dann den parentNode herausfinden, nur von dem angeklicktem. Und dann natürlich 'hidden' setzten.
Nur wie mache ich das mit dem id vergeben, es muss ja die zahlen 1-x machen(x = Anzahl der List-Elemente)) Ich habs nicht so mit for-Schleifen.
 
Öhm wozu willst du jedem eine id geben? Ich würde dem ganzen eine Klasse zuweisen wie in meinem Beispiel. Hast es mal ausprobiert? Bei mir hat das wunderbar funktioniert.
Oder ist es nicht das was du vor hattest?
 
Alsooo. Die Menüs selbst haben eine Id. Das sind die Knotenpunkte die egsucht werden.
Die Links werden mit einer Klasse ausgestattet. Diese sagen: Welches Menü soll aufgerufen werden. Heisst wenn der Link die Klasse: menu3 hat. Wird das menu3 aufgerufen und das derzeitig sichtbare unsichtbar gemacht.
 
Ok. Soweit habe ich es verstanden, aber ich bekomme es nicht hin mit dem title, dass ich bei jedem li einen title angebe und dieser angibt, welches Menü dann angezeigt wird.
 
Deswegen hab ich das ja über Klassen geregelt.
Du kannst ja nur Links, die zur zeit sichtbar sind.

Somit kannst du mit this.parentNode auf das aktuell sichtbare Menu zugreifen.
Für das Menü das angezeigt werden soll, wird die Klasse des Menüpunktes ausgelesen.

Siehst ja. Sind nur 2 Zeilen :D
Nur musst du halt vorher einen Event-Handler auf die Listenpunkte setzen
 
Vielen Dank. Habe es gerade mal umgeschrieben, so dass es mit 'title' funktioniert. Geht alles einwandfrei, vielen, vielen Dank!!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben