Ich versuche, Cookie so zu verwenden, dass ein Standardstil ODER ein bestimmter Stil in Bezug auf das angeklickte Ankertag angewendet wird, auch wenn der Browser geschlossen / erneut geöffnet wird. Wenn der Benutzer auf den zweiten Link geklickt, den Browser geschlossen oder aktualisiert und erneut geöffnet hat, sollte der Stil weiterhin aktiv sein. Wenn es das erste Mal ist, sollte die Standardeinstellung gelten. Das ist etwas über meinem Rasen.

Hier ist der HTML-Code:

<a id="default" href="#/">Default Style</a>
<a id="style2"  href="#/">Style 2</a>
<a id="style3"  href="#/">Style 3</a>

<ol>
<li><span>Hello World</span></li>
</ol>

JQuery: (Komplimente von StackOverflow)

<script type="text/javascript">
$('#default').on('click',function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('default');
});
$('#style2').click(function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style2');
});
$('#style3').click(function(){
    $('ol li span').removeClass(function() {
          return $(this).attr('class');
        }).addClass('style3');
});
</script>

CSS:

<style type="text/css">
.default{
color: #333;
}

.style2{
color: #999;
}

.style3{
color: #800;
}
</style>
4
Asynchronous 8 Okt. 2012 im 06:57

4 Antworten

Beste Antwort

Es gibt ein Cookie-Plugin für jQuery, mit dem Sie Cookies setzen und abrufen können. Wenn jedoch Browser, die älter als IE8 sind, kein Problem darstellen, würde ich stattdessen lokalen Speicher verwenden und nur den Standardstil für 1% der Besucher verwenden, die ältere verwenden Browser.

Wenn Sie Ihren Links eine Klasse hinzufügen, können Sie alle in einer Funktion als Ziel festlegen und die Klasse einfach anhand der angeklickten ID festlegen. Hier ein Beispiel für die Verwendung des lokalen Speichers:

$(function() {
    if (localStorage.getItem('style')) {
        $('ol li span').addClass(localStorage.getItem('style'));
    }else{
        $('ol li span').addClass('default');
    }

    $('.styles').on('click', function(e) {
        e.preventDefault();
        var styles    = ['default', 'style2', 'style3'],
            currStyle = this.id;

        $('ol li span').removeClass(styles.join(' ')).addClass(currStyle);

        localStorage.setItem('style', currStyle);
    });
});
​

GEIGE

1
adeneo 8 Okt. 2012 im 03:20

Cookies werden durch Bearbeiten des Cookie-Attributs des Dokumentobjekts (document.cookie) abgerufen und gesetzt. Das Mozilla Developer Network hat einen großartigen Artikel, der darüber spricht und bequeme Methoden zum Abrufen und Setzen von Cookies bietet. https://developer.mozilla.org/en-US/docs/DOM /document.cookie

HINWEIS: jQuery enthält keine Cookie-bezogenen Methoden. Es sind jedoch Plugins verfügbar, mit denen diese Methoden mit syntaktischem Zucker ($ .cookie) versehen werden.

Andernfalls können Sie nach Ihrem Cookie suchen und diese Logik wie gewohnt im fertigen Rückruf behandeln.

    $(body).ready(function(){
       if (document.cookie.match("cookie_name")) {
          // Handle logic here
       }
    });

Zum Setzen dieses Cookies basierend auf einem Klick auf einen Anker können Sie entweder das onclick-Attribut verwenden oder das href-Attribut auf "javascript: yourFunction ();" setzen oder die Klickmethode von jQuery verwenden.

2
Jeffington 8 Okt. 2012 im 03:19

Wie dieses Beispiel

$(document).ready(function()
{
   $('a').click(function(event)
   {

        $.cookie(//set ur cookie name & value);

   });
 }); 
0
Ravindra Bagale 8 Okt. 2012 im 03:30

Versuche dies:

// You can set all your default, style2, style3 css code inside this active.css

function appendStyleSheet() {
  $('head').append('<link rel="stylesheet" href="css/active.css" type="text/css"     id="active_stylesheet"/>'); 
}

// append the style sheet on load if the cookie is set to true
if ($.cookie('active') == 'true') {
    appendStyleSheet();      
} else {
    $('ol li span').addClass("default");
}

$("a").click(function () {

        var styles    = ['default', 'style2', 'style3'],
        currStyle     = this.id;

        $('ol li span').removeClass(styles.join(' ')).addClass(currStyle);

        appendStyleSheet();      
        $.cookie('active', 'true'); // set the cookie to true

});
0
Eli 8 Okt. 2012 im 03:43