Question

我想知道如何将视图从网格更改为列表，以及更改页面时保留所选视图。

在图片中举例说明。

谢谢你的帮助。

我的剧本：

$('button').on('click', function(e) {
  $('#list').click(function(e) {
    e.preventDefault();
    $('#container div').addClass('list');
  });
  $('#grid').click(function(e) {
    e.preventDefault();
    $('#container div').removeClass('list');
    $('#container div').addClass('grid');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons" style=" padding: 10px;">
  <button id="grid" class="grid">Grid View</button>
  <button id="list" class="list">List View</button>
</div>

Answer 1

您可以省略案例中的第一个事件处理程序。我建议将所有内容包装在ready - 处理程序中。您可以使用localStorage / sessionStorage来保存布局的状态并在页面加载时检查它：

$(document).ready(function(){
 var mode = localStorage.getItem('mode');

 if(mode){
    $('#container div').addClass(mode === 'grid' ? 'grid' : 'list');
 }

 $('#list').click(function(e) {
   e.preventDefault();
   $('#container div').removeClass('grid');
   $('#container div').addClass('list');
   localStorage.setItem('mode', 'list');
 });
 $('#grid').click(function(e) {
   e.preventDefault();
   $('#container div').removeClass('list');
   $('#container div').addClass('grid');
   localStorage.setItem('mode', 'grid');
 });
});

参考文献：

将网格模式更改为列表模式

1 个答案: