Показать\скрыть с сохранением состояния
Есть скрипт показывающий и скрывающий блок. Как сделать так что бы состояние блока сохранялось при перезагрузке страницы?
Т.е. например: блок был скрыт, я нажал показать он показался затем нажал F5 или перешел на другую страницу, блок сохранил свое состояние. :help: <a href="#" onclick="showFun()">Скрыть \ показать</a> <div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
var visible = true;
function showFun() {
if(visible) {
document.getElementById('myShowBlock' ).style.display = 'none';
visible = false;
} else {
document.getElementById('myShowBlock' ).style.display = 'block';
visible = true;
}
}
|
var hide = window.localStorage.getItem('hide');
function showFun() {
document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
window.localStorage.setItem('hide', (hide ^= 1));
}
if(hide) showFun();
Не тестировал, но работать должно. :) |
Оно скрывает\показывает, но при перезагрузке сбрасывается тоже :(
|
psfdek,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="#" onclick="showFun()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
var hide = window.localStorage.getItem('hide');
hide = hide === null ? 1 : +hide; //1 если самый самый первый раз нужно чтоб было открыто иначе 0
function showFun() {
window.localStorage.setItem('hide', (hide ^= 1));
document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
return false
}
document.getElementById('myShowBlock').style.display = hide ? 'block' : 'none';
</script>
</body>
</html>
|
Во-первых, showFn (show - показать) - неудачное имя для функции, которая скрывает блок.
Во-вторых: Цитата:
Мой вариант:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="javascript:toggleBlock()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
(function() {
var toggle = function(element, show) {
element.style.display = show ? 'block' : 'none';
};
var block = document.getElementById('myShowBlock');
var visible = localStorage.hasOwnProperty('visible') ? JSON.parse(localStorage.getItem('visible')) : true;
toggle(block, visible);
window.toggleBlock = function() {
toggle(block, visible = !visible);
localStorage.setItem('visible', visible);
};
})();
</script>
</body>
</html>
|
Цитата:
|
danik.js, преобразование в противоположное значение (true в false, false в true), знаю, что смотрится ужасно, но работает. :D
|
danik.js,
showFn нормальное название для функции которая работает с анимацией видимости элемента, hide ^= 1 супер решение, применял и буду применять если неподскажите лучше, единственное полезное это 17 строка в вашем коде кеширование элемента - остальное панты правильного пацана - но несмотря на всю правильность вашего кода он оставляет впечатление запутанности и тяжеловесности чтобы в него вникнуть нужно дополнительное усилие: бегать взглядом вверх вниз никакой последовательности. |
рони, +
hide ^= 1 и ~elemIndexOf('bla bla bla') очень удобно использовать, не понятно почему Данику это не нравится, типо якобы запутывает топик стартера, хотя сам какой-то запутанной фигни для такой простой задачи понаписал. |
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="#" onclick="return spell()">Скрыть \ показать</a>
<div id="myShowBlock">1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </div>
<script>
var hide = window.localStorage.getItem('hide'),
hide = hide === null ? 1 : +hide, //1 если самый самый первый раз нужно чтоб было открыто иначе 0
block = document.getElementById('myShowBlock');
function show() {
block.style.display = hide ? 'block' : 'none';
}
function spell() {
window.localStorage.setItem('hide', (hide ^= 1));
show();
return false
}
show()
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:53. |