Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2019, 11:59
Новичок на форуме
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 9

При клике слово меняет цвет а число увеличивается на 1, но есть недоработка
Здравствуйте. Помогите доработать код.

Нажимаем на любую из надписей Пуск, надпись становится красной, а рядом стоящее число увеличивается на один, при повторном нажатии все возвращается на исходное положение. Все действия запоминаются в куках браузера пользователя и отображаются при повторных заходах или обновлениях страницы.

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

<div class="myClass">
<span class="pusk">пуск</span>
<span class="num">25</span>
   
<span class="pusk">пуск</span>
<span class="num">30</span>
   
<span class="pusk">пуск</span>
<span class="num">50</span>
</div>


<script>
let myClass = document.querySelector('.myClass'), arr = [];
for(let e of myClass.querySelectorAll('.num')) arr.push(e.innerText);

let old = JSON.parse(localStorage.getItem('some'));
if(old) myClass.innerHTML = old.html;

myClass.addEventListener('click',e => {
if(e.target.classList.contains('pusk')){
let it = e.target;
let i = [...myClass.querySelectorAll('.pusk')].indexOf(it);
it.nextElementSibling.innerText == arr[i] ? 
(++it.nextElementSibling.innerText, it.style.color = 'red') :
(--it.nextElementSibling.innerText, it.style.color = '');
}
});

window.addEventListener('beforeunload',()=> localStorage.setItem('some',JSON.stringify({html : myClass.innerHTML})) );
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2019, 14:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,918

Lefseq,
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

</head>

<body>
<div class="myClass">
<span class="pusk">пуск</span>
<span class="num">25</span>

<span class="pusk">пуск</span>
<span class="num">30</span>

<span class="pusk">пуск</span>
<span class="num">50</span>
</div>
<script>
let myClass = document.querySelector('.myClass'),
    num = [...myClass.querySelectorAll('.num')],
    pusk = [...myClass.querySelectorAll('.pusk')];
let old = JSON.parse(localStorage.getItem('somme') || '{}');
Object.keys(old).forEach(i => {
    ++num[i].textContent;
    pusk[i].style.color = 'red'
});
myClass.addEventListener('click', e => {
    if (e.target.classList.contains('pusk')) {
        let it = e.target;
        let i = pusk.indexOf(it);
        if (old[i]) {
            --num[i].textContent;
            pusk[i].style.color = '';
            delete old[i]
        } else {
            ++num[i].textContent;
            pusk[i].style.color = 'red';
            old[i] = true
        }
        localStorage.setItem('somme', JSON.stringify(old))
    }
});
</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2019, 16:43
Новичок на форуме
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 9

рони,
Спасибо, работает!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение картинки при клике - самый простой способ Lagshmivar Firefox/Mozilla 16 23.02.2017 16:03
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 02:03
Кратное увеличение при клике на кнопку vabus Элементы интерфейса 2 15.04.2013 19:42
Изменить цвет при клике AndreyS jQuery 3 07.10.2012 15:27
Изменение фона элемента при клике. psydo Элементы интерфейса 8 28.06.2012 22:53