Повар ie изменение / переключение / переключение CSS класс jQuery проблемы

Question

Я нашел это аккуратное решение для изменения цвета фона и сохранения его в cook * ie, используя jquery .cook ie. Сделал небольшую корректировку, и она прекрасно работает:

$(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});
     });
 });

Теперь я пытаюсь на основе этого сделать изменение цвета темы, которое имеет класс по умолчанию .w3-blue-grey. Это самое близкое, что я получил:

$(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});
    });
});

Как вы можете видеть, я сделал имя повара ie по-другому, поэтому здесь нет столкновений, но по какой-то причине этот код не работает.

Я даже не могу объяснить, что это за ошибка, она как бы имеет собственный разум, иногда он меняет цвет, но не тот, и тогда go не возвращается к значению по умолчанию, иногда он вообще не дает никакого класса и он прозрачный ... Я просто не понимаю ...

Я пытался использовать switchClass вместо переключения, но это также шло на спад.

Я заметил, что это может быть связано с порядком выбора (иногда, когда я делаю изменения в нем), поэтому я даю свой код HTML.

<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 - мой выбор для изменения фона и это работает. И ниже мой переключатель темы:

<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>

Я потерял часы на этом, и я не вижу, что еще я мог придумать, чтобы решить эту проблему, пожалуйста, сообщите.

Я разобрался. У кого-нибудь есть лучшее решение, может быть?

<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

Я разобрался ... переключение классов не работало должным образом по некоторым причинам, так что теперь я просто делаю изменения в стиле, который создает класс. Значение в HTML select должно соответствовать полному стилю, который вы sh должны применить. а затем передать его в 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();
            });
        });