Comment puis-je supprimer un nom de classe existant et en ajouter un nouveau avec jQuery et des cookies?

Comment pouvez-vous supprimer un nom de classe et le remplacer par un nouveau?Comment puis-je supprimer un nom de classe existant et en ajouter un nouveau avec jQuery et des cookies?

<style> 
    .red {background-color: #FF0000;} 
    .green{background-color: #00FF00;} 
    .blue {background-color: #0000FF;} 
</style> 

<body class="red"> 
    <ul> 
     <li><a href="">red</a></li> 
     <li><a href="">green</a></li> 
     <li><a href="">blue</a></li> 
    </ul> 
</body>

Dans ce cas, lorsque vous cliquez sur rouge, vert ou bleu, le nom de la classe de corps change en conséquence. En outre, il fera un cookie qui permettra d'économiser le choix.

J'ai essayé jQuery .addClass et cela fonctionne, mais il ajoute une classe en plus de celle existante. De plus, je n'arrive pas à enregistrer le cookie.

Source

2009-04-29 kakkalo

désolé pour mon mauvais anglais ... – kakkalo

Utilisation:

$('.red').removeClass('red').addClass('blue');

Here's the full working code:

$(function() { 
    $("a").click(function() { 
     var color = $(this).text(); 
     $("body").removeClass().addClass(color); 
     return false; 
    }); 
});

Et maintenant, pour la partie cookie

$(function() { 
    $("a").click(function() { 
     var color = $(this).text(); 
     $("body").removeClass().addClass(color); 
     createCookie("color",color); 
     return false; 
    }); 

    if (readCookie("color") != null) { 
     $("body").removeClass().addClass(readCookie("color")); 

    } 
    else { 
     $("body").removeClass().addClass("red"); 
    } 
}); 

function createCookie(name,value,days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime()+(days*24*60*60*1000)); 
     var expires = "; expires="+date.toGMTString(); 
    } 
    else 
     var expires = ""; 
     document.cookie = name+"="+value+expires+"; path=/"; 
    } 

    function readCookie(name) { 
     var nameEQ = name + "="; 
     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,c.length); 
      if (c.indexOf(nameEQ) == 0) 
       return c.substring(nameEQ.length,c.length); 
     } 
     return null; 
    } 

    function eraseCookie(name) { 
    createCookie(name,"",-1); 
}

Working example here. Un merci à QuirksMode pour le code cookie pré-fait (cookie-cutter cookie code?)

Source

2009-04-29 22:41:02

j'ai essayé cela mais puisque la valeur de cookie remplacera ce nom de classe son ne fonctionne pas. – kakkalo

merci beaucoup. cela fonctionne parfaitement. maintenant pour la partie cookie. Y at-il un autre moyen de sauver sans cookie plugin – kakkalo

vous êtes simplement le meilleur. Merci beaucoup. – kakkalo

Vous aurez également besoin de removeClass.

Source

2009-04-29 22:41:36

Russ Cam's answer et Hank Gay's answer fonctionnera un régal. Pour les cookies, vous pouvez utiliser le jQuery cookie plugin.

Vous devriez être en mesure de suivre les exemples sur la façon de définir et lire le cookie pour vos besoins.

Source

2009-04-29 22:48:04

Vous n'avez pas besoin d'un plugin. S'il vous plaît changer votre libellé. Les cookies peuvent être manipulés sans jQuery ou l'un de ses plugins. – James

Sans jQuery vous pouvez le faire avec une ligne aussi simple que:

document.getElementsByTagName("body")[0].className = "red";

Ceci supprime la classe attribuée à l'élément et le remplacer par tout ce que vous voulez.

Pour les cookies, PPK has a few simple methods to read/write/erase cookies.

createCookie("mySiteCookie", "red", 7); // Set the cookie to expire in 7 days. 
readCookie("mySiteCookie"); // Should yield "red"

Source

2009-04-29 23:28:16

Comment puis-je supprimer un nom de classe existant et en ajouter un nouveau avec jQuery et des cookies?

Répondre

Questions connexes