时间戳

首页 > 解决方案 > Cookie 更改/切换/切换 CSS 类 jQuery 问题

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

问题描述

我发现了这个巧妙的解决方案，可以使用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>

标签： javascriptjqueryhtmlcsscookies

解决方案

我把它整理出来了……由于某些原因，切换类不能正常工作，所以现在我只是对类产生的样式进行更改。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();
            });
        });

推荐阅读