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

【问题标题】：Cookie change/switch/toggle CSS class jQuery problemsCookie 更改/切换/切换 CSS 类 jQuery 问题
【发布时间】：2020-03-28 14:17:01
【问题描述】：

我使用jquery.cookie 找到了this neat solution for changing background color and storing it into 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>

【问题讨论】：

标签： javascript jquery html css cookies

【解决方案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();
            });
        });

【讨论】：