Форум

Nezumi.May · #1 (**permalink**) 10.01.2017, 16:13

Доброго времени суток! Прошу помочь направить мысли в нужное русло.

Имеется список серий:

<div class="block">
<a onclick="vidLoc('2713543',this,'3')">1</a>
<a onclick="vidLoc('2711882',this,'3')">2</a>
<a onclick="vidLoc('2716610',this,'3')">3</a>
</div>

Cкрипт, который при нажатии на ссылку добавит ей id и class.

$(function(){
 $('.block a').click(function(){
 $('a.eps').removeAttr('id');
 $('.block a').removeClass('eps');
 $(this).addClass('eps');
 $(this).attr('id','eps');
 });
});

Кнопка:

<button onclick="onclickVhod()">Сохранить значение</button>

И скрипт для этой кнопки, который по идее должен добавить класс для выбранной серии и сохранить его:

var parapam = document.getElementById('eps');
function onclickVhod() {
parapam.className = (parapam.className == 'raz') ? '' : 'raz';
localStorage.setItem('hide', parapam.className);
}

if(localStorage.getItem('hide') == 'raz') {
document.getElementById('eps').className = 'raz';
}

У выбранной серии после нажатия на кнопку меняется класс, всё работает, но после перезагрузки класс у выбранной ссылки слетает. Как мне запомнить класс?

рони · #2 (**permalink**) 10.01.2017, 16:21

Сообщение от Nezumi.May

после перезагрузки класс у выбранной ссылки слетает.

откуда новая страница должна узнать что на старой какому то элементу вы присвоили id?

ksa · #3 (**permalink**) 10.01.2017, 16:43

Сообщение от Nezumi.May

Как мне запомнить класс?

Если запоминать на клиенте (компьютере), то есть:
- куки
- локальное хранилище

рони · #4 (**permalink**) 10.01.2017, 16:46

ksa,

рони · #5 (**permalink**) 10.01.2017, 16:47

Nezumi.May,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .eps{
      color: #FF0000;
       background-color: #FFFF00;
    }
   .block a{
     font-size: 48px;
     cursor: pointer;
   }

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

  <script>
$(function() {
    var a = $(".block a"),
        btn = $(".btn"),
        indx = localStorage.getItem("indx");
    a.on("click", function() {
        a.not($(this).addClass("eps")).removeClass("eps");
        indx = a.index(this);
        localStorage.removeItem("indx")
    });
    indx !== null && a.eq(indx).click();
    btn.on("click", function() {
        indx !== null && localStorage.setItem("indx", indx)
    })
});
  </script>
</head>

<body>
<div class="block">
<a onclick="vidLoc('2713543',this,'3')">1</a>
<a onclick="vidLoc('2711882',this,'3')">2</a>
<a onclick="vidLoc('2716610',this,'3')">3</a>
</div>
<button  class="btn">Сохранить значение</button>

</body>
</html>

Nezumi.May · #6 (**permalink**) 10.01.2017, 20:42

Сообщение от рони

откуда новая страница должна узнать что на старой какому то элементу вы присвоили id?

Я понимаю, но решила уже не писать свои похождения-приключения как пыталась реализовать свой план. Была вот идея задать айди, чтобы он сохранялся для выделенной ссылки, но моих знаний и смекалки хватило лишь на создание айди, но не его запоминания для новой страницы.

Ваш вариант работает, спасибо! Но после второго захода на страницу или повторной перезагрузки сохранённые данные пропадают. Вроде так быть не должно

рони · #7 (**permalink**) 10.01.2017, 21:47

Сообщение от Nezumi.May

Вроде так быть не должно

должно!!! иначе кнопка Сохранить значение ненужна, сохранение идёт только по кнопке, не нажали == не сохранили.
без кнопочный вариант

$(function() {
    var a = $(".block a"),
        btn = $(".btn"),
        indx = localStorage.getItem("indx");
    a.on("click", function() {
        a.not($(this).addClass("eps")).removeClass("eps");
        indx = a.index(this);
        localStorage.setItem("indx", indx)
    });
    indx !== null && a.eq(indx).click();
});

оба варианта используют местоположение(индекс) нажатого элемента

Nezumi.May · #8 (**permalink**) 11.01.2017, 12:46

Сообщение от рони

должно!!! иначе кнопка Сохранить значение ненужна, сохранение идёт только по кнопке, не нажали == не сохранили.

Странно. Я предполагала, что при нажатии на кнопку переменная сохраняется в ключе, а уже ключ проверяется при обновлении страницы, следовательно нажатие кнопки повторно не обязательно.

Спасибо! Доделала без кнопочный вариант и получилось то что нужно, даже немного лучше, чем предполагалось.

Форум

Справочник

Discord чат

Курсы javascript