Cookie 更改/切换/切换 CSS 类 jQuery 问题

Question

我找到了这个使用jquery.cookie 更改背景颜色并将其存储到 cookie 的巧妙解决方案。 做了一点调整，效果很好：

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

正如您所看到的，我以不同的方式创建了 cookie 的名称，因此那里没有冲突，但由于某种原因，此代码不起作用。

我什至无法解释错误是什么，就像它有自己的想法，有时它会变成颜色，但错误的，然后不会回到默认状态，有时它根本不提供任何类并且它是透明的.. . 我就是不明白...

我尝试使用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 中的值需要是您希望应用的完整样式。 然后将其传递给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();
            });
        });