Ankündigung

Einklappen
Keine Ankündigung bisher.

JavaScript Funktion mit For-Schleife definieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • JavaScript Funktion mit For-Schleife definieren

    Hallo zusammen,
    ich möchte mehrere Funktionen setzen und dazu eine for-Schleife verwenden. Allerdings funktioniert das nicht so wie ich das möchte, wie man dem Code entnehmen kann. Weiß jemand wie man das Problem umgehen kann?

    Code:
    function toggleMenu(){
    	var firstNaviLinks = document.getElementsByClassName("first-link");
    	var hiddenNavis = document.getElementsByClassName("hidden-nav");
    
    	for (var i = 0; i < firstNaviLinks.length; i++) {	
    	
    	alert(firstNaviLinks.length); // alert = 2
    		
    		firstNaviLinks[i].onclick = function(){
    			
    			alert(i); // alert = 2 => Fehlermeldung ?? wieso nicht 0 und 1
    
    			if (hiddenNavis[i].style.display == "block")
    				hiddenNavis[i].style.display = "none";
    			else  hiddenNavis[i].style.display = "block";
    		}
    		
    	}
    }
    Die Variable i nimmt immer den Wert nach dem Schleifendurchlauf an und nicht die Werte während des Durchlaufs.

    Ich weiß echt nicht was ich da jetzt machen soll,
    Danke schonmal


  • #2
    Es wird keine Kopie von i eingebunden sondern die Referenz auf die Variable, und die ist am Schleifenende eben 2.

    Nimm doch jQuery:
    Code:
    $('.first-link').bind('click', function() {
      // hidden-nav selektieren
      if ($(this).is(':visible')) {
        hiddenNav.show();
      } else {
        hiddenNav.hide();
      }
    });
    "Mein Name ist Lohse, ich kaufe hier ein."

    Kommentar


    • #3
      Mögliche Lösung ohne jQuery:
      Code:
              function toggleMenu()
              {
                  var firstNaviLinks = document.getElementsByClassName("first-link");
                  var hiddenNavis = document.getElementsByClassName("hidden-nav");
      
                  for (var i = 0; i < firstNaviLinks.length; i++) {   
                  
                      firstNaviLinks[i].setAttribute('data-index', i);
                       
                      firstNaviLinks[i].onclick = function() 
                      {
                          var i = this.getAttribute('data-index');
      
                          if (hiddenNavis[i].style.display == "block") {
                              hiddenNavis[i].style.display = "none";
                          } else {
                              hiddenNavis[i].style.display = "block";
                          }
                      }
                      
                  }
              }
      Siehe auch: Using data attributes

      Aber das mit jQuery zu machen ist sicherlich eleganter.

      Kommentar


      • #4
        Hervorragend, vielen Dank euch beiden!

        Ich habe jetzt die Lösung von monolith genommen, da ich mein Projekt erstmal ohne JQuery erstellen möchte. Wenn ich JavaScript dann mal beherrsche, wechsel ich zu JQuery

        Kommentar


        • #5
          Nochmal bezüglich jQuery - der Vorschlag von Chriz in vollständig:
          Code:
                  $(document).ready(function()
                  {
                      $('.first-link').click(function() {
                          var index = $(this).index() - 1; // Den Index des .first-link-Elements erhalten
                          var $hiddenNav = $('.hidden-nav').eq(index); // Das .hidden-nav-Element anhand des Index holen
          
                          if ($hiddenNav.is(':visible')) {
                              $hiddenNav.hide();
                          } else {
                              $hiddenNav.show();
                          }
                      });
                  });
          Wie man sieht ist das kürzer und wenn man jQuery beherrscht auch einfacher. jQuery nimmt oft viel Schreibarbeit ab.

          Kommentar


          • #6
            Zitat von Max444 Beitrag anzeigen
            Wenn ich JavaScript dann mal beherrsche
            Gewagte Aussage ;D

            Kommentar

            Lädt...
            X