グリッドモードをリストモードに変更する

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 -handlerですべてをラップすることをお勧めします。あなたは、レイアウトの状態を保存し、ページの読み込みにそれをチェックするための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'); 
}); 
}); 

Example

---

参考文献：

document-ready

localStorage

を

ternary operator