时间戳

首页 > 解决方案 > LocalStorage 函数延迟在添加/删除类上应用更改

javascript - LocalStorage 函数延迟在添加/删除类上应用更改

问题描述

我有两个显示网格视图或列表视图的单选按钮，取决于选择了哪一个。但是我想在页面重新加载时保留视图。默认视图是列表视图。我使用本地存储使它工作，但我认为我做错了什么，因为：

1-我重复代码两次（这是我可以使它工作的唯一方法）

2-如果我选择网格视图，然后重新加载，视图显示为列表 1 秒钟，然后自动更改网格。

这是我的js：

if (localStorage.getItem('typeView') == 'list') {
    $(".card-container").addClass("card-list");
    $('.card-container').removeClass('card-grid');
    $('.actions-list').show();
    $('.actions-grid').hide();
}

if (localStorage.getItem('typeView') == 'grid') {
    $('.card-container').addClass('card-grid');
    $('.card-container').removeClass('card-list');
    $('.actions-list').hide();
    $('.actions-grid').show();
}
$('#view-card-mode .list-view').off('click');
$('#view-card-mode .list-view').on('click', function () {
    localStorage.clear();
    localStorage.setItem('typeView', 'list');
    $('.card-container').removeClass('card-grid');
    $('.card-container').addClass('card-list');
    $('.actions-list').show();
    $('.actions-grid').hide();
});
$('#view-card-mode .grid-view').off('click');
$('#view-card-mode .grid-view').on('click', function () {
    localStorage.clear();
    localStorage.setItem('typeView', 'grid');
    $('.card-container').removeClass('card-list');
    $('.card-container').addClass('card-grid');
    $('.actions-list').hide();
    $('.actions-grid').show();
});

的HTML：

<div class="btn-group" data-toggle="buttons" id="view-card-mode">
  <label class="btn btn-default grid-view active" title="Vista de Grilla">
    <input type="radio" name="options" id="grid-view" autocomplete="off" checked>
        <i class="fa fa-th"> </i>
  </label>
  <label class="btn btn-default list-view" title="Vista de Lista">
    <input type="radio" name="options" id="list-view" autocomplete="off">
        <i class="fa fa-list"></i>
  </label>
</div>

谢谢！

标签： javascripthtmljquery

解决方案

通过使用切换和切换类，您可以设置布尔值。您还可以通过使用值使更改代码更简单。

$("#view-card-mode").on("change", 'input[type="radio"]', function () {
  // set localstorage to selected radio button
  localStorage.set('typeView', this.value);
  // alter the view
  toggleView();
})

function toggleView (selectRB) {
  // get the active selection
  var value = localStorage.get('typeView') || 'grid-view';
  var isList =  value === 'list-view';
  // toggle based on the selections
  $('.card-container').toggleClass('card-grid', !isList);
  $('.card-container').toggleClass('card-list', isList);
  $('.actions-list').toggle(!isList);
  $('.actions-grid').toggle(isList);
  // if load, set the selected radio button to synced with local storage
  if (selectRB) {
    $("input[name=radio][value=" + value + "]").prop('checked', true);
  }
}

toggleView(true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-group" data-toggle="buttons" id="view-card-mode">
  <label class="btn btn-default grid-view active" title="Vista de Grilla">
    <input type="radio" name="options" id="grid-view" autocomplete="off" checked  value="grid-view">
        <i class="fa fa-th"> </i>
  </label>
  <label class="btn btn-default list-view" title="Vista de Lista">
    <input type="radio" name="options" id="list-view" autocomplete="off" value="list-view">
        <i class="fa fa-list"></i>
  </label>
</div>

推荐阅读