Display Block in None Umwandeln.



  • Hallo,
    Ich habe zwei ids regi und login. Login ist geöffnet. Jetzt hab ich so eingestellt das wenn er auf regibutton klickt das Login none wird und regi block. Der Code dazu:

    function showRegi() {
        var login = document.getElementById('login');
    	var regi = document.getElementById('regi');
    	var regibutton = document.getElementById('regibutton');
    
    	if (login.style.display == 'none') {
    		if (regi.style.display == 'none') {
               	regi.style.display='block';
            }
    	}else {
    		login.style.display = 'none';
    		if (regi.style.display == 'none') {
               	regi.style.display='block';
    		}
    	}
    return false;
    }
    

    Das Problem hierbei ist das erst beides none werden und regi erst nach dem zweiten klicken öffnet. Kleines Problem hab ich aber schon seit ein paar Tagen...
    Grüsse


  • Mod

    Hallo.

    Bitte jQuery verwenden - das ist die Standard Library für JavaScript.
    Ich zeige dir kurz wie das ganze in korrektem jQuery aussehen würde:

    $(document).on("click", "#regibutton", function() {
      var $login = $('#login');
      var $regi = $('#regi');
      if($login.is(':hidden')) { $login.show(); $regi.hide(); }
      else { $login.hide(); $regi.show(); }
    });
    

    bzw. noch besser wäre es über CSS gelöst.

    Wenn wir zB folgenden HTML Code hätten:

    <div id="loginform" class="show-login">
    <span class="login"> <!-- ... --> </span>
    <span class="regi"> <!-- ... --> </span>
    </div>
    

    Dann können wir per CSS umschalten:

    .show-login .login, .show-regi .regi {
      display:block;
    }
    .show-login .regi, .show-regi .login {
      display:none;
    }
    

    Und nun können wir per

    $('#loginform').toggleClass('show-login', 'show-regi');
    

    einfach hin und her schalten zwischen login und regi und brauchen keine Anwendungslogik mehr.

    Und wenn wir das ganze animieren wollen, packen wir in die CSS Datei noch ein transform rein.

    Nun zu deinem Problem - deine ifs sind sehr komisch. Wenn entweder login oder regi angezeigt werden soll, dann ist das per:

    if(login.style.display=='none') {
      regi.style.display = 'none';
      login.style.display = 'block';
    } else {
      regi.style.display = 'block';
      login.style.display = 'none';
    }
    

    Jetzt wird, wenn login sichtbar ist login ausgeblendet und regi ein. Bzw. wenn regi sichtbar ist, wird regi ausgeblendet und login ein.

    Oder willst du etwas anderes? Was wenn beide ausgeblendet sind oder beide eingeblendet? Ist das überhaupt möglich?



  • Das mit jquery bekomm ich irgendwie nicht hin 😞
    Also mein Code sieht so aus.

    css

    #regi {
       display: none;
    }
    
    #login {
    	display: block;
    }
    

    js

    function showLogin() {
        var login = document.getElementById('login');
    	var regi = document.getElementById('regi');
    	var button  = document.getElementById('loginbutton');
    
    	if (regi.style.display == 'none') {
    		if(login.style.display == 'none') {
               login.style.display='block';
    	}  
       }else {
       		regi.style.display = 'none';
    		if(login.style.display == 'none') {
               login.style.display='block';
    	} 
    	   }
       return false;
    }
    
    function showRegi() {
        var login = document.getElementById('login');
    	var regi = document.getElementById('regi');
    	var regibutton = document.getElementById('regibutton');
    
    	if (login.style.display == 'none') {
    		if (regi.style.display == 'none') {
               	regi.style.display='block';
            }
    	}else {
    		login.style.display = 'none';
    		if (regi.style.display == 'none') {
               	regi.style.display='block';
    		}
    	}
    return false;
    }*/
    

    Und die FUnktionen ruf ich dan durch zwei Buttons



  • Hey jetzt hats geklappt vielen Dank.

    $(document).on("click", "#regibutton", function() {
      var $login = $('#login');
      var $regi = $('#regi');
      if($login.is(':hidden')) { $regi.show(); }
      else { $login.hide(); $regi.show(); }
    });
    
    $(document).on("click", "#loginbutton", function() {
      var $login = $('#login');
      var $regi = $('#regi');
      if($regi.is(':hidden')) { $login.show(); }
      else { $regi.hide(); $login.show(); }
    });
    

    So hats geklappt vielen dank. 👍



  • JQuery ist nicht die Standardbibliothek für JavaScript!!


  • Mod

    ch++ schrieb:

    JQuery ist nicht die Standardbibliothek für JavaScript!!

    Doch!
    Natürlich nicht laut dem ECMA Standard aber jQuery sollte immer und überall verwendet werden wo keine noch größere Library verwendet wird die alles was jQuery abdeckt auch erledigt.

    Also, quasi immer.

    Das ist kein Scherz oder so. Jeder JavaScript Entwickler muss jQuery können - das ist die Voraussetzung. Denn jQuery ist der Standard bei JavaScript Anwendungen.


Anmelden zum Antworten