代码之家 › 专栏 › 技术社区 › Mark Tjan

使用localStorage记住列表视图

local-storage wordpress html php javascript

Mark Tjan · 技术社区 · 7 年前

我对Javascript比较陌生。经常含糊不清,很少写,雅达雅达。因此,我当前的任务是创建一个列表,并在标准列表或网格项视图之间进行交换。我或多或少弄明白了我没有弄清楚的是如何在重新加载和多页之间记住状态(我们的列表分页)。

以下是代码的组成部分:

HTML

<strong>View</strong>
    <div class="view">
        <a href="#" id="grid">List</a>
        <a href="#" id="list">Grid</a> 
    </div>
<div class="display">
<?php 
$temp = $wp_query; 
$wp_query = null; 
$wp_query = new WP_Query(); 
$wp_query->query('showposts=24&order=ASC&post_type=review'.'&paged='.$paged); 

while ($wp_query->have_posts()) : $wp_query->the_post(); 
?>
<div class="item list">
    <div class="thumb"><a href="<?php the_permalink(); ?>"><img src="<?php the_post_thumbnail_url( 'thumbnail' ); ?>"></a></div>
    <div class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
    <div class="author"><p>By <a href="<?php the_author(); ?>"><?php the_author(); ?></a></p></div>
    <div class="date"><?php the_date('d-m-Y'); ?></div>
</div>
<?php endwhile; ?>

javascript

$(document).ready(function() {
    $('#list').click(function(event){event.preventDefault();$('.item').addClass('grid');});localStorage.setItem('.item', grid);
    $('#grid').click(function(event){event.preventDefault();$('.item').removeClass('grid');localStorage.setItem('.item', list);
    (localStorage.getItem('.item') == 'grid') {

});

任何关于我做错了什么或如何更好地理解这个问题的帮助都将不胜感激。再一次,我对这一切都是陌生的。js的事情,所以如果以上只是 糟透的 剧本

1 回复 | 直到 7 年前

Codeseer 7 年前

此代码应该有效。 (要使localstorage工作,请在StackOverflow沙盒外部运行它)

基本上,您只想将视图的最后一个已知状态保存为字符串 '网格' 或 '列表'

并将该值作为类应用于 美元(文件)。就绪()

$(document).ready(function() {
  $('#list').click(function(event) {
    event.preventDefault()
    $('.item').addClass('list')
    $('.item').removeClass('grid')
    localStorage.setItem('.item', 'list');
  });
  $('#grid').click(function(event){
    event.preventDefault();
    $('.item').addClass('grid')
    $('.item').removeClass('list')
    localStorage.setItem('.item', 'grid')
  })
  let itemClass = localStorage.getItem('.item')
  $('.item').addClass(itemClass)
});

.item.grid {
  display: inline-block;
  padding: 10px;
  border: 1px solid;
}

.item.list {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="list">List</button>
<button id="grid">Grid</button>

<br/>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>

推荐文章

Evgeniya Lashukova · 未捕获的TypeError:部署到Github页面时无法读取null的属性(读取“length”)

2 年前

StephenW · 如何在本地存储中更新时间戳?

2 年前

Raj Lama · 无法解析自定义路径目录以保存捕获的图像

6 年前

cnak2 · 无法分析localstorage angular 2

6 年前

yer · 如何从按钮下拉列表中获取值并将其保存在localStorage中?角度4

6 年前

Mark Gerryl Mirandilla · 本地存储中的阵列数据,在页面重新加载后重置

7 年前

Kenya JJ · 如何在LocalStorage中“保存”我的JS样式?

7 年前

rob.m · 如何在单击时增加本地存储中的数字?

7 年前

stack · 如何存储的结果。是否将each()放入本地存储?

7 年前

Ð¡ÑÑÐ¿Ð° ÐÐ°ÑÐºÐ°ÑÐ¾Ð² · 如何访问LocalStorage中对象内的数组长度

7 年前