jQuery div entfernen und Cookie setzen, um nie wieder zu zeigen

Question

Ich benutze die folgende html/jQuery, um ein div nach dem Klicken auf einen Link zu entfernen.

Wenn ich auf den Link klicke, muss ich auch einen Cookie setzen, der das div als "entfernt" hält, wenn derselbe Besucher auf die Seite zurückkehrt.

HTML

<div id="close-me"> 
    bye bye - being removed on click of close link 
</div> 

<p> 
    <a href="#" class="close-div">Close</a> 
</p> 

jQuery

jQuery(document).ready(function($) { 
    jQuery(".close-div").click(function(){ 
    jQuery("#close-me").remove(); 
    }); 
}); 

würde ich jquery.cookie.js nehmen ist die beste Lösung.

Wie würde ich das tun?

JSfiddle here

Answer 1

jQuery Plätzchen ist nicht mehr maintened, also würde ich nicht darauf eingehen. Stattdessen können Sie js-cookie verwenden, das vom Entwicklerteam von jQuery Cookie als Ersatz empfohlen wird.

Einmal geladen, wird es sein:

jQuery(document).ready(function($) { 
 
    if (typeof Cookies.get('hide-div') !== 'undefinied') { 
 
     $("#close-me").remove(); 
 
    } 
 

 
    $(".close-button").click(function() { 
 
     $("#close-me").remove(); 
 
     Cookies.set('hide-div', true); 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="close-me"> 
 
    <i class="close-button">&times;</i> 
 
    Your content here 
 
</div>

Answer 2

Sie könnte in der Tat die jQuery Cookie Bibliothek hier verwenden. Einmal auf Last zu prüfen, ob das Cookie gesetzt wird und entfernen Sie die div und einmal beim Klicken auf den Link Entfernen das Cookie zu setzen, wie folgt aus:

jQuery(document).ready(function($) { 
    if ($.cookie('hide-div')) { 
     $("#close-me").remove(); 
    } 

    $(".close-div").click(function() { 
     $("#close-me").remove(); 
     $.cookie('hide-div', true); 
    }); 
}); 

Updated fiddle

Vergessen Sie nicht, die jQuery enthalten Cookie-Bibliothek in Ihrer Seite. Ich habe eine Kopie von this CDN verwendet.

Answer 3

Sie können so etwas wie dies (ohne Plugin) tun:

var setCookie = function(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 
    var expires = "expires=" + d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
} 

var getCookie = function(cname) { 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for (var i = 0; i < ca.length; i++) { 
    var c = ca[i]; 
    while (c.charAt(0) == ' ') c = c.substring(1); 
    if (c.indexOf(name) == 0) return c.substring(name.length, c.length); 
    } 
    return ""; 
} 

jQuery(document).ready(function($) { 
    console.log(getCookie("closed")); 
    if (getCookie("closed") == "closed") { 
    $("#close-me").hide(); 
    } 

    jQuery(".close-div").click(function() { 
    jQuery("#close-me").remove(); 
    setCookie("closed", "closed", 365) 
    }); 
}); 

Ihre Geige aktualisiert: https://jsfiddle.net/nn42z27t/

Dieses Beispiel stammt aus: http://www.w3schools.com/js/js_cookies.asp