Cookie change/switch/toggle CSS class jQuery problems

Question

I found this neat solution for changing background color and storing it into cookie , using jquery.cookie . Made a little adjustment and it works great:

$(document).ready(function () {
 $("body").css("background-image",$.cookie("<?php echo $_SESSION['username_login']; ?>"));
     $("#background-change").change(function (event) {
       var img =  $(this).val();
        $("body").css("background-image",img);
         $.cookie("<?php echo $_SESSION['username_login']; ?>",img, {path: '/', secure: true});
     });
 });

Now I am trying based on this make a theme color change witch has default class .w3-blue-grey. This is closest that I got:

$(document).ready(function () {
$(".w3-blue-grey").toggleClass($.cookie("<?php echo $_SESSION['username_login']; ?>col"));
    $("#color-change").change(function (event) {
      var col =  $(this).val();
       $(".w3-blue-grey").toggleClass(col);
        $.cookie("<?php echo $_SESSION['username_login']; ?>col",col, {path: '/', secure: true});
    });
});

As you can see I made the name of the cookie differently so there is no collision there but for some reason this code is not working.

I can not even explain what is the error, it's like it has mind of his own, sometimes it changes into color, but wrong one, then won't go back to default, sometimes it gives no class at all and it's transparent... I just don't get it...

I tried with switchClass instead of toggle but it was also going wild.

I noticed it may have something to do with order of select (sometimes when I do changes in it) so I'm giving my HTML code too.

<select name="wall" id="background-change" class="w3-padding">
   <option>...</option>
   <option value='url("img/wall6.png")'>Glavna</option>
   <option value='url("img/wall2.png")'>Opcija 1</option>
   <option value='url("img/wall3.png")'>Opcija 2</option> 
</select>

Up is my select for changing background and that works. And below is my theme switcher:

<select name="colour" id="color-change" class="w3-padding">
        <option >...</option>
        <option value='w3-blue-grey'>Light grey</option>
        <option value='w3-indigo'>Indigo</option>
        <option value='w3-blue'>Light blue</option>
</select>

I lost hours on this and I don't see what else I could think of to solve it, please advise.

I sorted it out. Anyone has better solution maybe?

<script type="text/javascript">
       $(document).ready(function () {
        $(".w3-blue-grey").css('cssText',$.cookie("<?php echo $_SESSION['username_login']; ?>col"));
            $("#color-change").change(function (event) {
 var col =  $(this).val();
  //window.alert(col);
  $(".w3-blue-grey").css('cssText',col);
   $.cookie("<?php echo $_SESSION['username_login']; ?>col",col, {path: '/', secure: true});
   //location.reload();
            });
        });
</script>    

Answer 1

I sorted it out... switching classes didn't work properly for some reasons so now I am just making changes to style the class produces. The value in HTML select needs to be full style that you wish to apply. and then pass it into cssText .

       $(document).ready(function () {
        $(".w3-blue-grey").css('cssText',$.cookie("<?php echo $_SESSION['username_login']; ?>col"));
            $("#color-change").change(function (event) {
 var col =  $(this).val();
  //window.alert(col);
  $(".w3-blue-grey").css('cssText',col);
   $.cookie("<?php echo $_SESSION['username_login']; ?>col",col, {path: '/', secure: true});
   //location.reload();
            });
        });