Question

我有一个项目列表，然后是网格，列表和精简视图的更改视图选项。当用户打开链接时默认为网格（我已经实现了）。我想要实现的是当用户点击列表视图然后下次用户再次打开该页面时，它应该是用户最后一次选择的视图。 JSFiddle here

这是我的代码：

＆＃13;

$('li').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list').addClass('grid');
  }
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('compact').addClass('grid');
  }

  if ($(this).hasClass('list')) {
    $('#container ul').removeClass('grid').addClass('list');
  }
  if ($(this).hasClass('list')) {
    $('#container ul').removeClass('compact').addClass('list');
  }
  if ($(this).hasClass('compact')) {
    $('#container ul').removeClass('list').addClass('compact');
  } else if ($(this).hasClass('compact')) {
    $('#container ul').removeClass('grid').addClass('compact');
  }
});

$('document').ready(function() {
  $('.menu li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

＆＃13;

.menu ul li button:hover {
  background-color: rgba(206, 0, 0, 1);
}

.active {
  background-color: rgba(30, 30, 30, 1);
}

#container ul {
  list-style: none;
}

#container .buttons {
  margin-bottom: 20px;
}

#container .list li {
  width: 100%;
  border-bottom: 1px dotted #CCC;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#container .grid li {
  float: left;
  width: 20%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

#container .compact li {
  float: left;
  width: 30%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="grid"> <a href='#' id="show2">Grid</a></li>
    <li class="list"> <a href='#' id="show3">List</a></li>
    <li class="compact"> <a href='#' id="show1">Compact</a></li>
  </ul>
</div>

<div id="container">
  <ul class="grid">
    <li>Item 2</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
  <div>
  </div>

＆＃13;

Answer 1

执行此操作的一种方法是将选项存储为cookie，然后在文档加载时检查该cookie并相应地设置布局，例如

＆＃13;

$('li').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    document.cookie = "menuChoice=grid";
    $('#container ul').removeClass('list').addClass('grid');
    $('#container ul').removeClass('compact').addClass('grid');
  }

  if ($(this).hasClass('list')) {
    document.cookie = "menuChoice=list";
    $('#container ul').removeClass('grid').addClass('list');
    $('#container ul').removeClass('compact').addClass('list');
  }
  if ($(this).hasClass('compact')) {
    document.cookie = "menuChoice=compact";
    $('#container ul').removeClass('list').addClass('compact');
    $('#container ul').removeClass('grid').addClass('compact');
  }
});

$('document').ready(function() {
  switch (getCookie("menuChoice")) {
    case 'grid':
      $('#container ul').removeClass('list').addClass('grid');
      $('#container ul').removeClass('compact').addClass('grid');
      break;
    case 'list':
      $('#container ul').removeClass('list').addClass('list');
      $('#container ul').removeClass('compact').addClass('list');
      break;
    case 'compact':
      $('#container ul').removeClass('list').addClass('compact');
      $('#container ul').removeClass('compact').addClass('compact');
      break;
    default:
      break;
  }
  $('.menu li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

＆＃13;

.menu ul li button:hover {
  background-color: rgba(206, 0, 0, 1);
}

.active {
  background-color: rgba(30, 30, 30, 1);
}

#container ul {
  list-style: none;
}

#container .buttons {
  margin-bottom: 20px;
}

#container .list li {
  width: 100%;
  border-bottom: 1px dotted #CCC;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

#container .grid li {
  float: left;
  width: 20%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

#container .compact li {
  float: left;
  width: 30%;
  height: 50px;
  border-right: 1px dotted #CCC;
  border-bottom: 1px dotted #CCC;
  padding: 20px;
}

</style>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="grid"> <a href='#' id="show2">Grid</a>

    </li>
    <li class="list"> <a href='#' id="show3">List</a>

    </li>
    <li class="compact"> <a href='#' id="show1">Compact</a>

    </li>
  </ul>
</div>


<div id="container">
  <ul class="grid">

    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>


  <div>

  </div>

＆＃13;

由于这是沙盒饼干，请不要看我的JSfiddle http://jsfiddle.net/Alessi42/7Ln5dc2t/作为一个有效的例子。

希望这有帮助！

缓存用户单击列表项选择

1 个答案: