Javascript-форум - Запоминалка значения для выбранного элемента

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Запоминалка значения для выбранного элемента (https://javascript.ru/forum/jquery/66787-zapominalka-znacheniya-dlya-vybrannogo-ehlementa.html)

Запоминалка значения для выбранного элемента

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

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

<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';
}

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

Цитата:

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

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

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

Цитата:

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

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

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

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>

Цитата:

Сообщение от рони (Сообщение 440236)

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

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

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

Цитата:

Сообщение от 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();
});

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

Цитата:

Сообщение от рони (Сообщение 440272)

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

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

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