При клике слово меняет цвет а число увеличивается на 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>
|
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>
|
рони,
Спасибо, работает! |
| Часовой пояс GMT +3, время: 05:30. |