Funktion ausführen onload nur erstmals

Ich habe ein Menü in der Kopfzeile mit der folgenden StrukturFunktion ausführen onload nur erstmals

$(document).ready(function(){ 
 
\t $('.dropdown').on('show.bs.dropdown', function(e){ 
 
\t \t $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
 
\t }); 
 
    $('.dropdown').on('hide.bs.dropdown', function(e){ 
 
    \t $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
 
    \t }); 
 

 
\t $('#entrar').click(function(e){ 
 
\t  $('#head').slideToggle(); 
 
    \t $(".boton").css("display","none"); 
 
    \t $("#secciones").slideToggle(); 
 
     $("#foot").slideToggle(); 
 
\t }); 
 
    $('#entrar').click(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $(".principal").offset().top + 70 
 
    }, 700); 
 
    }); 
 
}); 
 

 
$(document).ready(init); 
 
\t function init(){ 
 
    var sec = document.getElementById("secciones"); 
 
    var he = document.getElementById("head"); 
 
    var fo = document.getElementById("foot"); 
 
    he.style.display = "none"; 
 
    sec.style.display = "none"; 
 
    fo.style.display = "none"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="main_wrapper"> 
 
    <header id="head"> 
 
\t \t <div class="container"> 
 
\t \t \t <section class="row"> 
 
\t \t \t \t <article class="col-xs-3"> 
 
\t \t \t \t \t <h1 id="main_logo"> 
 
\t \t \t \t \t \t <a href="index.php"><img src="images/logo.png" alt=""></a> 
 
\t \t \t \t \t </h1> 
 
\t \t \t \t </article> 
 
\t \t \t \t <article class="col-xs-9"> 
 
\t \t \t \t \t <ul class="nav nav-pills" id="menu"> 
 
\t \t \t \t \t \t <li class="active"><a href="index.php">INICIO</a></li> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">MODELOS<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a class="sec_index" href="index.php#galeria">Modelos en Panamá</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a class="sec_index" href="index.php#blog">Últimas Entradas</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="blog.php">Blog Chicas507</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="glosario.php">Glosario de Términos</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li class="dropdown"> 
 
\t \t \t \t \t \t \t <a class="dropdown-toggle" data-toggle="dropdown" href="#">ANÚNCIATE<span class="caret"></span></a> 
 
\t \t \t \t \t \t \t <ul class="dropdown-menu"> 
 
\t \t \t \t \t \t \t \t <li><a class="sec_index" href="index.php#paquetes">Paquetes</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="registro.php">Regístrate</a></li> 
 
\t \t \t \t \t \t \t \t <li><a href="recuperar.php">Recuperar Cuenta</a></li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <li><a class="sec_index" href="index.php#contacto">CONTACTO</a></li> 
 
\t \t \t \t \t \t <li><a href="about.php">INFORMACIÓN</a></li> 
 
\t \t \t \t \t \t <li><a href="login.php">INGRESA</a></li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </article> 
 
\t \t \t </section> 
 
\t \t </div> 
 
\t </header> 
 
    <section class="principal" id="principal"> 
 
\t \t \t <div class="boton" id="entrar"><a href="#">ENTRAR</a></div> 
 
\t \t \t <div class="boton" id="salir"><a href="#">SALIR</a></div> 
 
\t \t </section> 
 
\t <section class="secciones" id="secciones"> 
 
     some sections 
 
    </section> 
 
    <footer id="foot"> 
 
    </footer> 
 
    </div> 
 
</body>

Und ich habe verschiedene Abschnitte in der Webseite, werden einige der Links aus dem Menü Ich zu dem Abschnitt im Index, zum Beispiel Index # Modelle. Alles funktioniert gut, aber hier ist das Ding. Ich habe etwas JavaScript-Code, der die Abschnitte und den Header init versteckt. Ich benutze onload im Körper, um die Funktion aufzurufen und eine Schaltfläche "entrar" anzuzeigen. Das funktioniert, aber die Funktion wird jedes Mal aufgerufen, wenn ich die Seite neu lade und ich möchte das erste Mal ausführen und wenn die Seite aktualisiert wird. Alles wird angezeigt, ohne auf den Button zu klicken. Außerdem möchte ich nicht laden, wenn ich zu einem anderen Teil der Seite wechsele. Zum Beispiel, wenn ich den Blog betrete und dann klicke, um nach Hause zu gehen, lädt die Funktion und ich muss wieder auf "entrar" klicken. Ich will das nicht.

Ich habe versucht, das zu beheben, aber ich kann die Lösung nicht finden. Ich schätze Ihre Hilfe. Bitte!

Quelle

2016-11-02 Alexander Pulido

Ich denke, was Sie suchen ein Protokoll in Funktion. –

Warum verwenden Sie Javascript, um etwas zu tun, was CSS für Sie tun kann? Zugegeben, es muss etwas serverseitig sein, um zu überprüfen, ob das Menü angezeigt wird oder nicht, aber ja ... das Verwenden von JavaScript zum Anzeigen/Verbergen von Menüelementen ist ein schlechtes Design und sollte vermieden werden. – junkfoodjunkie

ist es nicht, wenn ich nur mit CSS, dann jedes Mal, wenn die Seite geladen wird, wird die CSS anwenden, die Idee, mit Javascript zu tun, wenn zu steuern, wann es zu tun ist. –

Sie ein local var festlegen können, wenn Sie es anhalten, nachdem der Browser geschlossen werden soll:

$(function() { 
    var visited = localStorage['visited']; 
    if (!visited) { 
     init(); 
     localStorage['visited'] = true; 
    } 

    function init() { 
     var sec = document.getElementById("secciones"); 
     var he = document.getElementById("head"); 
     var fo = document.getElementById("foot"); 
     he.style.display = "none"; 
     sec.style.display = "none"; 
     fo.style.display = "none"; 
    } 
});

oder session, wenn Sie es passieren soll, nachdem der Browser geschlossen wird:

$(function() { 
    var visited = sessionStorage['visited']; 
    if (!visited) { 
     init(); 
     sessionStorage['visited'] = true; 
    } 

    function init() { 
     var sec = document.getElementById("secciones"); 
     var he = document.getElementById("head"); 
     var fo = document.getElementById("foot"); 
     he.style.display = "none"; 
     sec.style.display = "none"; 
     fo.style.display = "none"; 
    } 
});

Quelle

2016-11-02 18:45:16

¡das funktioniert perfekt! Danke vielmals –

Sie können HTML5-Webstorage verwenden.

if (typeof(Storage) !== "undefined") 
    { 
     console.log("Your browser doesn't support webstorage"); 
    } 
    else if (sessionStorage.getItem("ui_flag") === null) // Check if the key is set. It's a self defined key. 
    { 
     sessionStorage.setItem("ui_flag", 1); // If not set, set it 
     $(document).ready(init); // Now call your init function here. This code will execute only once for a window. 
    } 
    else 
    { 
     //No Action. It's not the first time. 
    }

Quelle

2016-11-02 18:28:34

Ich würde mit einem Cookie gehen, der einen kleinen Wert speichern soll, wo man einfach nach seiner Existenz sucht.

Kombiniert mit CSS und Sie erhalten eine kleine und effiziente Lösung.

Mit dem unten CSS/JS, wenn die Seite geladen wird es erstmals das Cookie erstellt, die verborgenen Elemente

Durch einfaches zeigt das zweite Mal, das loadedonce zum html Element hinzufügen und dann die CSS-Kicks in, Verschieben Sie die Erstellung von Cookies auf den Button klicken, es zeigt sie erst nach dem Klicken auf diese Schaltfläche.

Da Cookies nicht in Stack-Schnipsel arbeitet, machte ich ein fiddle demo mit Ihrem Code

CSS

#secciones, #head, #foot, .loadedonce .boton { 
    display: none; 
} 
.loadedonce #secciones, .loadedonce #head, .loadedonce #foot { 
    display: block; 
}

JS wenn auf Last (entweder im Kopf oder am Anfang Datei Ihre js)

(function(d) { 
    if (document.cookie.indexOf("loadedonce=yes") < 0) { 
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";  
    } else { 
    d.classList.add('loadedonce');  
    } 
})(document.documentElement);

JS wenn auf Klick

(function(d) { 
    if (document.cookie.indexOf("loadedonce=yes") >= 0) { 
    d.classList.add('loadedonce');  
    } 
})(document.documentElement); 


$('#entrar').click(function() { 
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";  
});

Quelle

2016-11-02 19:12:02 LGSon

Funktion ausführen onload nur erstmals

Antwort

Verwandte Themen