Question

我有一个复选框，用于激活黑/光主题的更改。 Light是默认主题。

<div class="switch">
    <label>
        <input id="layoutSwitch" type="checkbox"><span class="lever"></span>
    </label>
</div>

这是我的Jquery：

$('#layoutSwitch').change(function() {
    if($(this).is(":checked")){
        $('#bodyLayout').addClass("bodyLayout"); 
        $('#leftMenu').addClass("leftMenu");
    }else{
        $('#bodyLayout').removeClass("bodyLayout");  
        $('#leftMenu').removeClass("leftMenu");  
    }
});

我的黑暗主题css：

/* Dark Theme */
.bodyLayout {
    background-color: #525a69; }
       .leftMenu {
          background-color: #252d3a; }\

我想要的是即使我重新加载页面也要保持相同的选定主题。并且即使在页面重新加载时也保持当前选中的复选框。

我在搜索时发现了这段代码。当我单独使用它时它起作用，但当我尝试使用上面的代码加入它时，它不能正常工作，它也会选择我页面上的所有开关。我只想要选择的开关。

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

Answer 1

您可以使用解决方案https://jsfiddle.net/jn1we569/6/

$('#layoutSwitch').change(function() {
  $('#bodyLayout').toggleClass("bodyLayout"); 
  $('#leftMenu').toggleClass("leftMenu");
  localStorage.setItem('layoutSwitch', $(this).is(':checked'));
});

localStorage.layoutSwitch === 'true'? $('#layoutSwitch').prop('checked', true).trigger("change"): '';

.bodyLayout {
  height: 100px;
  width: 100px;
  background-color: #525a69; 
}

.leftMenu {
  height: 100px;
  width: 100px;
  background-color: #252d3a; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch">
    <label>
        <input id="layoutSwitch" type="checkbox"><span class="lever"></span>
    </label>
</div>

<div id="bodyLayout"></div>
<div id="leftMenu"></div>

在stackoverflow中，由于localStorage，它无法正常工作，请检查jsfiddle。

首先，您需要使用change event，然后使用localStorage语句检查checkbox已检查。

使用checkbox jQuery方法切换类，而不是检查toggleClass。

您的整个JavaScript代码将进入$(document).ready(function(){...});。

希望这会对你有所帮助。

Answer 2

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

您正在使用此代码执行的操作是将输入状态保存到本地存储中。

这里的错误是您使用$('input')在页面上的所有输入标签上触发此操作。如果您只想保存$('#layoutSwitch')复选框，请将其传递给$('input')。

以下代码应该有效：

$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('#layoutSwitch').prop('checked', test || false);
    updateTheme();
});

$('#layoutSwitch').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));    // remove this line if you do not want to log value in console
    updateTheme();
});

function updateTheme()
    if($('#layoutSwitch').is(":checked")){
        $('#bodyLayout').addClass("bodyLayout"); 
        $('#leftMenu').addClass("leftMenu");
    }else{
        $('#bodyLayout').removeClass("bodyLayout");  
        $('#leftMenu').removeClass("leftMenu");  
    }
}

Answer 3

将选择器更改为ID，例如input1，input2

    $(function(){

    for (var selectorId in localStorage){
       if(selectorId.contains("input")){
          var test = localStorage.getItem(selectorId) === 'true'? true: false;

          $('#'selectorId).prop('checked', test || false);
      }
    }


    $('input').on('change', function() {
        var selectorId = $(this).attr("id");
        localStorage[selectorId] = $(this).is(':checked');
        console.log($(this).is(':checked'));
    });


});

即使页面重新加载，如何使用复选框维护主题颜色？

3 个答案: