Создание системы голосования Javascript ⇐ CSS

[Anonymous]

Это моя попытка создать систему голосования. Он работает так, как и ожидалось, когда есть только один. Однако когда я пытаюсь увеличить количество систем голосования больше одной, это не работает должным образом. Проблема в том, что система голосования опирается на состояния upVote и downVote. Итак, когда я увеличиваю количество систем голосования, все они полагаются на одни и те же две переменные, вместо того, чтобы каждая имела свои собственные переменные upVote и downVote. Я думаю, что есть два способа решить мою проблему.

• Создайте массив, чтобы каждая система голосования имела свой собственный upVote и downVote.
• Используйте замыкание.

Первый вариант мне кажется слишком громоздким и непрактичным. Я не знаю, как реализовать это решение. Второй я попробовал, но не смог заставить его работать.

Я не мог придумать ничего проще. Я не обязательно ищу решение, использующее замыкание. Подойдет любое простое решение на ванильном Javascript.

Рабочий код:

< div class="snippet">

Код: Выделить всё

const up_vote_span = document.querySelector('.up-vote');
const down_vote_span = document.querySelector('.down-vote');
let count = document.querySelector('.number');

let upVote = false;
let downVote = false;

up_vote_span.addEventListener('click', function() {

if (downVote === true) {

up_vote_span.style.color = "#3CBC8D";
down_vote_span.style.color = "dimgray";
count.innerHTML = parseInt(count.innerHTML) + 2;
upVote = true;
downVote = false;

} else if (upVote === false) {
up_vote_span.style.color = "#3CBC8D";
count.innerHTML = parseInt(count.innerHTML) + 1;
upVote = true;
} else if (upVote === true) {
up_vote_span.style.color = "dimgray";
count.innerHTML = parseInt(count.innerHTML) - 1;
upVote = false;
}
});

down_vote_span.addEventListener('click', function() {

if (upVote === true) {
up_vote_span.style.color = "dimgray";
down_vote_span.style.color = "#3CBC8D";
count.innerHTML = parseInt(count.innerHTML) - 2;
downVote = true;
upVote = false;
} else if (downVote === false) {
down_vote_span.style.color = "#3CBC8D";
count.innerHTML = parseInt(count.innerHTML) - 1;
downVote = true;
} else if (downVote === true) {
down_vote_span.style.color = "dimgray";
count.innerHTML = parseInt(count.innerHTML) + 1;
downVote = false;
}
});

Код: Выделить всё

.number {
display: inline-block;
text-align: center;
}

.vote {
display: flex;
flex-direction: column;
text-align: center;
}

.up-vote {
color: dimgray;
cursor: pointer;
}

.down-vote {
cursor: pointer;
color: dimgray;
}

Код: Выделить всё

[i][/i]
990
[i][/i]

Проблемный код:

Код: Выделить всё

const up_vote_span = document.getElementsByClassName('up-vote');
const down_vote_span = document.getElementsByClassName('down-vote');
const count = document.getElementsByClassName('number');

let upVote = false;
let downVote = false;

for (let i = 0; i < count.length;  i++) {
up_vote_span[i].addEventListener('click', function() {

if (downVote === true) {
up_vote_span[i].style.color = "#3CBC8D";
down_vote_span[i].style.color = "dimgray";
count[i].innerHTML = parseInt(count[i].innerHTML) + 2;
upVote = true;
downVote = false;

} else if (upVote === false) {
up_vote_span[i].style.color = "#3CBC8D";
count[i].innerHTML = parseInt(count[i].innerHTML) + 1;
upVote = true;
} else if (upVote === true) {
up_vote_span[i].style.color = "dimgray";
count[i].innerHTML = parseInt(count[i].innerHTML) - 1;
upVote = false;
}
});

down_vote_span[i].addEventListener('click', function() {

if (upVote === true) {
up_vote_span[i].style.color = "dimgray";
down_vote_span[i].style.color = "#3CBC8D";
count[i].innerHTML = parseInt(count[i].innerHTML) - 2;
downVote = true;
upVote = false;
} else if (downVote === false) {
down_vote_span[i].style.color = "#3CBC8D";
count[i].innerHTML = parseInt(count[i].innerHTML) - 1;
downVote = true;
} else if (downVote === true) {
down_vote_span[i].style.color = "dimgray";
count[i].innerHTML = parseInt(count[i].innerHTML) + 1;
downVote = false;
}
});
}

Код: Выделить всё

.number {
display: inline-block;
text-align: center;
}

.vote {
display: flex;
flex-direction: column;
text-align: center;
}

.up-vote {
color: dimgray;
cursor: pointer;
}

.down-vote {
cursor: pointer;
color: dimgray;
}

Код: Выделить всё

[i][/i]
990
[i][/i]

[i][/i]
990
[i][/i]

[i][/i]
990
[i][/i]

[i][/i]
990
[i][/i]

Подробнее здесь: https://stackoverflow.com/questions/552 ... ing-system