Question

我对Javascript比较陌生。通常是kludged，很少写，yadda yadda。所以我当前的任务是创建一个列表，让它在标准列表或网格项视图之间交换。那部分我或多或少想通了 - 我不知道如何制作它以便重新加载和多个页面（我们的列表分页）之间记住状态。

以下是代码的组成部分：

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事情都很陌生，所以如果以上只是 atrocious 脚本，我会道歉。

Answer 1

此代码应该有效。 （要使localstorage工作在StackOverflow沙箱之外运行）

基本上您只想将视图的最后已知状态保存为字符串＆＃39; grid＆＃39; 或＆＃39; list＆＃39;

并将该值应用于 $（文档）.ready（）

＆＃13;

$(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)
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用localStorage记住列表视图

1 个答案: