Question

我在我的framework7应用程序中制作主题更换器，这里是使用单选按钮的换色器代码

<ul id="bluegr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="blue" checked>
<div class="item-inner">
<div class="item-title">Blue</div>
</div>
</label>                  
</ul>

<ul id="graygr">
<label class="label-radio item-content">
<input type="radio" name="color-radio" value="gray">
<div class="item-inner">
<div class="item-title">Gray</div>
</div>
</label>
</ul>

这是主题转换器

<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-dark" checked>
<div class="item-inner">
<div class="item-title">Dark</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="layout-radio" value="layout-white">
<div class="item-inner">
<div class="item-title">Light</div>
</div>
</label>
</li>
</ul>

这是使这些颜色和主题变换器工作的javascript

var myApp = new Framework7();
      var $$ = Dom7;
      $$('input[name="color-radio"]').on('change', function () {
        if (this.checked) {
          $$('.view').removeClass('theme-blue theme-gray theme-lightblue');
          $$('.view').addClass('theme-' + $$(this).val());
        }
      });
      $$('input[name="layout-radio"]').on('change', function () {
        if (this.checked) {
          $$('.view').removeClass('layout-dark layout-white');
          $$('.view').addClass(this.value);
        }
      });

演示：http://qa.ftios.net/61-2

但是当我尝试它时，它确实改变了颜色和主题，但是当我重新加载并恢复到默认值时，我该如何解决这个问题呢？

Answer 1

您尚未将选区存储在任何位置，因此每次重新加载页面时，DOM都会恢复到原始状态。

最简单的方法是将选择保存到localStorage，并且在调用该模块/页面时，您只需检查该项是否存在，如果存在，则根据其值，将主题设置为该值。

framework7 - 如何在重新加载页面时保持单选按钮的选择？

1 个答案: