Question

我每次保存样式表时都试图保存.addClass，以便按钮记住

用户可以打开/关闭选项。

我简单的HTML：

<div id="btn-switch" class="btn-group" data-toggle="buttons">
    <button class="btn btn-default" type="radio" name="options" id="option1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off">off</button>
    <button class="btn btn-default" type="radio" name="options" id="option2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off">on</button>
</div>

这是我的代码：

<script>
$(document).ready(function() {

    if ($.cookie("css")) {
        $("#bg").attr("href", $.cookie("css"));
    }

    $("#btn-switch button").click(function() {
        $("#bg").attr("href", $(this).attr('data-color'));
        $("#btn-switch .active").removeClass("active");
        $(this).addClass("active");
        $.cookie("css", $(this).attr('data-color'), {
            expires: 365,
            path: '/'
        });
        return false;
    });
});
</script>

如何使用相同的cookie来保存.active类？我也会使用本地存储所有这些，但我不知道如何启动我上面实现的代码片段

Answer 1

以下是使用localstorage的方法：

鉴于此标记（我在本例中使用input type =“radio”）：

<div class="btn-group" data-toggle="buttons" id="btn-switch">
  <label class="btn btn-default">
    <input type="radio" id="option1" name="options" value="1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off"> off
  </label> 
  <label class="btn btn-default">
    <input type="radio" id="option2" name="options" value="2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off"> on
  </label> 
</div>
<br><br>
<a id="bg" href="{T_THEME_PATH}/normal.css">Background</a>

在脚本中，侦听单选按钮上的更改事件。对于任何已检查的无线电都会触发此操作。首先将#bg href设置为点击的收音机的颜色数据属性（使用jQuery .data() ）。然后将此href存储到localstorage。另外，将单击选项的ID存储到localstorage。然后在后续页面加载中使用localstorage中的项目来设置正确的href并激活正确的单选按钮：

$(document).ready(function() {
    var csshref = localStorage["css"];
    if (csshref) {
        $("#bg").prop("href", csshref);
    }
    var activeid = localStorage["activeid"];
    if (activeid) {
        $("#" + activeid).prop("checked", true).closest("label").addClass("active");
    }

    $('#btn-switch [type="radio"]').on("change", function() {
        $("#bg").attr("href", $(this).data('color'));        
        localStorage.setItem('css', $(this).data('color'));        
        localStorage.setItem('activeid', $(this).prop('id'));        
        return false;
    });
});

这是 DEMO

在演示中，尝试检查和关闭然后再次打开RUN。您将看到后续运行记住检查了哪个项目并正确设置了href。

Answer 2

这是一种简单的方法：

    $(document).ready(function () {
        //on page load check for cookie value and add active class
        if($.cookie("isButtonActive") == 1)
        {
            $("#btn-switch button").addClass("active");
        }

        $("#btn-switch button").click(function() { 
           //your previous code here
           if($("#btn-swtich button").hasClass("active") == true)
           {
               //button was active, de-activate it and update cookie
               $.("#btn-switch button").removeClass("active");
               $.cookie("isButtonActive", "0");
           }
           else
           {
               //button is not active. add active class and update cookie.
               $.("#btn-switch button").addClass("active");
               $.cookie("isButtonActive", "1");

           }
        });
    });

使用jQuery cookie或本地存储保存.addClass

2 个答案: