Ergebnis 1 bis 9 von 9
  1. #1
    ReSutekh ist offline Grünschnabel
    registriert
    20-11-2009
    Beiträge
    6

    Funktion funktioniert mit Variable nicht

    Hallo allerseits

    Ich mache für mein Geschäft gerade eine Website auf welcher ich ein Aufklappbares CSS Menü verwende. Wenn JS aktiviert ist, soll dieses Menü jedoch erst aufklappen wenn drauf geklickt wird.
    Mit PHP können mehrere Menüs generiert werden.
    Mein JS sieht bisher so aus:

    Code:
    <script type="text/javascript">
      var obj = document.getElementsByClassName("innen");
      var oncl = document.getElementsByClassName("menu")
      function change_display (i) {
      if (obj[0].style.display == "none") {
        obj[0].style.display = "block";
      }
      else {
        obj[0].style.display = "none";
        }
      }
      for(i=0;i<obj.length;i++) {
        obj[0].style.display="none";
        oncl[i].onclick = change_display;
      }				
    </script>
    Das Ganze funktioniert so auch, das Menü ist cklickbar und geht per klick auf oder zu.
    Da ich jedoch mehrere Menü haben kann, brauche ich eine variable Lösung:
    Wenn ich im letzten for jedoch das change_display zu change_display(i) ändere geht schon gar nichts mehr, bzw. die funktion wird scheinbar sofort aufgerufen und nicht onclick.
    Ich bin noch JS Anfänger, es kann also sein das es noch so trivial ist...ich sitze jedoch schon einen über einen Tag an dem stückchen...

    Wäre schön wenn mir jemand helfen kann

    Grüsse

    ReSutekh

  2. #2
    Bieber ist offline König
    registriert
    10-12-2007
    Ort
    Erfurt
    Beiträge
    964

    AW: Funktion funktioniert mit Variable nicht

    wenn du ein change_display(i) einbaust, hast du dir eine schöne endlosschleife geschaffen, denn die Funktion ruft sich durch rekursion immer wieder neu auf

    dein Problem habe ich leider nicht richtig verstanden, prinzipiell bin ich aber gegen JS-Menüs, die Effekte die du mit onclick realisieren kannst, sollten auch mit CSS möglich sein
    crazy

    Schach online: Lust auf eine Partie Schach gegen mich? Einfach kostenlos auf onlineschach.eu registrieren und den Bieber suchen.

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    Thumbs up AW: Funktion funktioniert mit Variable nicht

    Zitat Zitat von Bieber Beitrag anzeigen
    die Effekte die du mit onclick realisieren kannst, sollten auch mit CSS möglich sein
    Ich wüsste nicht wie. onmouseover/onmouseout - Ja, aber onclick? Wie willst du das realisieren?

    @ReSutekh (puh): Jeder Eventhandler erwartet eine Funktionsreferenz -> anonyme Funktionen - dann wird aber der Zugriff auf die Variable i schwer -> Umbauen:
    Code:
     function change_display (node) {
    	if (node.style.display == "none") {
    		node.style.display = "block";
    	}
    	else {
    		node.style.display = "none";
    	}
    }
    for(i=0;i<obj.length;i++) {
    	obj[i].style.display="none";
    	oncl[i].i = i;
    	oncl[i].onclick = function(){change_display(obj[this.i]);};
    }
    PS: hoffe deine Logik verstanden zu haben.

  4. #4
    ReSutekh ist offline Grünschnabel
    registriert
    20-11-2009
    Beiträge
    6

    AW: Funktion funktioniert mit Variable nicht

    Danke für Eure Antworten.
    Ok zur Erklärung:
    Ich habe ein CSS Menü welches standartmässig bei :hover aufgeht, das ist in der CSS festgelegt.
    Mein Arbeitgeben möchte aber nun, das wenn JS aktiviert ist, das Menü nicht bei :hover, sondern erst beim drauf klicken auf bzw. zu klappt.

    @Bieber:
    Ich sehe hier einfach keine Endlosschleife, bzw. ich weiss nicht wie eine entstehen kann...kannst Du mir das genauer erklären?
    Wie ist es denn möglich, das Menü per CSS mit einem klick zu öffnen und wieder zu schliessen?
    Ich würde es ja gerne möglichst ohne JS machen, aber ich sehe im Momment keine andere möglichkeit.

    EDIT:

    @kkapsner:

    Danke, es funktioniert perfekt!
    Könntest Du mir bitte noch zwei Punkte erklären?
    Code:
    oncl[i].i = i;
    oncl[i].onclick = function(){change_display(obj[this.i]);};
    Die erste Zeile verstehe ich erst einmal gar nich...an einem Beispiel würde das doch heissen: oncl[0].0 = 0; ?
    Da frage ich mich erstens, was bedeutet das Null nach dem Punkt, und wieso setze ich das ganze auf Null?
    Bei der zweiten Zeile hat für mich das in den geschweiften Klammern so gut wie keine Bedeutung...
    Wäre ganz Toll wenn Du mir das noch erklären könntest

    Danke für Deine Mühe
    Geändert von ReSutekh (20-11-2009 um 13:26 Uhr)

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Funktion funktioniert mit Variable nicht

    Nein - es würde heißen oncl[0].i = 0 - das erste i ist der Name der Eigenschaft, die ich neu definiere.
    Die zweite Zeile ist die anonyme Funktion - mach' dich darüber schlau. Das in den geschweiften Klammern ist der Funktionsinhalt - da rufe ich einfach nur die Funktion auf (mit dem richtigen Parameter); this ist dabei ein eine Referenz auf oncl[i] (wenn das nicht klar ist, solltest du dich mit den Grundlagen des Bindens in JS beschäftigen).

  6. #6
    ReSutekh ist offline Grünschnabel
    registriert
    20-11-2009
    Beiträge
    6

    AW: Funktion funktioniert mit Variable nicht

    Nun habe ich doch noch eine Frage:

    Ich habe gemerkt das es so langsam zu viel Code braucht da immer mal wieder etwas dazu kommt.
    Am besten zeige ich das wohl anhand eines Beispiels:
    Code:
    .menu {
      display: block;
      width: 165px;
      float: left;
    }
    .menu:hover .innen {
      display: block;
      width: 165px;
    }
    Solche Dinge brauche ich für dieses Menü recht häufig.
    Ist es nun möglich, anstatt jede style-Eigenschaft per JS zu ändern wenn ich auf das Menü klicke (wie mir oben bereits dabei geholfen wurde), einfach das :hover auszulesen und auf das Element zu übertragen?
    Also anhand des Beispiels nun das .menu:hover auslesen und in .innen speichern?
    Und bei einem weiteren Klick das ganze wieder auf den standard zurücksetzen?
    Als Test habe ich bereits dies versucht:
    Code:
    node.style = document.getElementsByClassName("menu")[0].hover;
    Das Funktioniert zwar fast, jedoch wird es dann wieder als :hover gespeichert, also nach dem ersten Klick auf das Menü werden die Eigenschaften übernommen, jedoch wenn ich die Maus vom Menü weg bewege, klappt das Menü wieder zu...

    Hat wer ne Idee?

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Funktion funktioniert mit Variable nicht

    Wo hast du denn die Eigenschaft hover her? (also ich meine im JS - im CSS gibt es die natürlich) Die gibt es nicht.
    Du kannst aber mit CSS-Klassen arbeiten (JS: className), die du per JS setzt und wieder entfernst.

  8. #8
    ReSutekh ist offline Grünschnabel
    registriert
    20-11-2009
    Beiträge
    6

    AW: Funktion funktioniert mit Variable nicht

    Die Eigenschaft hat ein Forenbeitrag per google ausgespuckt.

    Heisst das, die CSS ist so nicht wirklich erreichbar?
    Ich benutze ja auch schon className um die verschiedenen Klassen überhaupt anzusprechen, aber ich möchte ja nun das Element mit hover ansprechen um die Eigenschaften dann auf das Element ohne hover zu übertragen.

    Oder hab ich dich komplett falsch verstanden?
    Ich hab leider noch nicht sehr viel Ahnung von JS, aber ich bin es im Rahmen des Projekts so schnell und gut wie möglich am erlernen

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Funktion funktioniert mit Variable nicht

    Ja - das musst du anders machen:
    Code:
    .menu:hover .innen, .menu.hover .innen {
      display: block;
      width: 165px;
    }
    wenn du jetzt deinem Menü noch zusätzlich die Klasse "hover" gibst hast du die gleiche Formatierung wie beim normalen hover.

Ähnliche Themen

  1. Funktion funktioniert erst beim 2. Aufruf
    Von hasher im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 16-03-2009, 22:25
  2. Variable als festen Text in neue Funktion einsetzen
    Von GeorgeDorn im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 24-04-2007, 11:40
  3. Submit Funktion Variable an PHP übergeben.
    Von Tolwin im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 20-06-2005, 17:08
  4. Variable in Funktion
    Von Links234 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 25-04-2005, 17:08
  5. Antworten: 3
    Letzter Beitrag: 14-03-2005, 07:54

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •