Цитата:
Использовать локальное хранилище или по старинке - куки. |
Так и надо чтоб на одном компе было.
Подскажите как забить положение в локальное хранилище, и затем считать его. Я просто только начинаю изучать. Пока не могу понять. |
Цитата:
|
Все никак не получается запомнить позицию в локальное хранилище, и затем открыть ее.
Может кто-нибудь поможет написать такой код на данном примере, а то все никак не получается. Цитата:
|
tk.stas,
:cray:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
$(document).ready(function()
{
var p = $("p"), i = localStorage.getItem("indx")||0;
p.eq(i).addClass("selected");
$(document).on("click", ".next, .prev", function(event)
{
event.preventDefault();
var selected = $(".selected");
selected.removeClass("selected");
if($(this).hasClass("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
selected.addClass("selected");
i = p.index(selected);
localStorage.setItem("indx", i);
}
)
}
);
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
|
А на чистом js данный скрипт не поможите сделать?
Цитата:
|
Sasha2000,
а сами начать код? |
Цитата:
1) addClass, removeClass и hasClass заменяются соответственно на classList.add, classList.remove и classList.contains Подробнее про classList тут: https://developer.mozilla.org/ru/doc...ment/classList 2)$ можно заменить на document.querySelectorAll или на document.querySelector (если в дальнейшем на то, что мы выбираем селектором, пытаются повесить обработчик события) $(document).ready(function(){ //code } можно заменить на window.onload = function(){ //code } 3) p.eq(i) можно заменить на p[i] 4)$(document).on("click", ".next, .prev", function(event){//code}); очень условно можно заменить на document.querySelector('.next, .prev').addEventListener('click', function(event){//code}, false); 5)$(this) можно заменить на event.target ну и т.д. в общем то по каждой функции идёте на: https://api.jquery.com и изучаете, что она делает и ищете в учебнике как можно это сделать на нативном JS А вообще проще в теге head прописать: <script src="http://code.jquery.com/jquery-latest.min.js"></script> и не думать больше в дальнейшем как переписать с JQuery на JS :) |
Я использую данный скрипт в приложении на андройд, и почему-то именно в версии 4.3 происходит вылет при нажатии кнопок листания.
Получается не ахти. Зависаю уже на p[i], а что делать с
if(event.target.classList.contains("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
вообще не пойму.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
window.onload = function(){
var p = document.querySelector("p"), i = localStorage.getItem("indx");
p[i].classList.add("selected");
document.querySelector('.next, .prev').addEventListener('click', function(event){
event.preventDefault();
var selected = document.querySelector(".selected");
selected.classList.remove("selected");
if(event.target.classList.contains("next") ) {
selected = selected.next('p').size()? selected.next():p.first() ;
}
else {
selected = selected.prev('p').size()? selected.prev():p.last();
}
selected.classList.add("selected");
i = p.index(selected);
localStorage.setItem("indx", i);
}, false);
}
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
Буду благодарен за помощь:) |
tk.stas,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>selectable demo</title>
<style>
p{ display: none; }
.selected { display: block; }
</style>
<script>
window.onload = function(){
var p = document.querySelectorAll("p"), i = +localStorage.getItem("indx")||0;
p[i].classList.add("selected");
document.querySelector('.next').addEventListener('click', function(event){
event.preventDefault();
p[i].classList.remove("selected");
i = ++i%p.length;
p[i].classList.add("selected");
localStorage.setItem("indx", i);
}, false);
document.querySelector('.prev').addEventListener('click', function(event){
event.preventDefault();
p[i].classList.remove("selected");
i--;
i < 0 && (i = p.length-1);
p[i].classList.add("selected");
localStorage.setItem("indx", i);
}, false);
}
</script>
</head>
<body>
<a href="" class="prev">prev</a> <a href="" class="next">next</a>
<p>1</p><p>2</p><p>3</p>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:09. |