分配并计算分数，保持选中状态

Question

我正在寻找一个类似于他的解决方案，但没有选择/选项，因为我不能有下拉列表！如何使用Javascript在多项选择中保持运行分数因此，我在页面上有多个div，我需要为它们分配分数，并根据页面上选择的元素计算总分数。我希望有人能帮忙，我将不胜感激！

应该计数的元素显示在滑块中，所以看起来像这样：

选择你的分数

<div class="slider-test-1">
<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">1</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">2</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">3</h2></div>
</div>
<p class="test-text">Description
</p>
</div>

<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">4</h2></div>
<div class="slider-score-section"><h2 class="heading-t2">5</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">6</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">7</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">8</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">9</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">10</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">11</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">12</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
</div>

<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">1</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">2</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">3</h2></div>
</div>
<p class="test-text">Description
</p>
</div>

<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">4</h2></div>
<div class="slider-score-section"><h2 class="heading-t2">5</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">6</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">7</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">8</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">9</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-score-section" ><h2 class="heading-t2">10</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">11</h2></div>
<div class="slider-score-section" ><h2 class="heading-t2">12</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
</div>
</div>
<div class="total">0</div>

得分值为1-12，如每个滑球的标题中所述，并且总得分应该是在每个滑球上获得的得分(因此例如，滑球1的6+滑球2的8总共＝14(。如果您能提供帮助，请提前感谢！

Answer 1

const totalDiv = document.querySelector('.total')
const sliderScores = [0, 0]
function updateTotal() {
totalDiv.textContent = sliderScores[0] + sliderScores[1]
}
document.querySelectorAll('.slider-1-score-section').forEach(scoreSection => {
scoreSection.addEventListener('click', (event) => {
sliderScores[0] = parseInt(event.target.textContent, 10)
updateTotal()
})
})
document.querySelectorAll('.slider-2-score-section').forEach(scoreSection => {
scoreSection.addEventListener('click', (event) => {
sliderScores[1] = parseInt(event.target.textContent, 10)
updateTotal()
})
})

.slider-1-score-section{
background-color: #cdb0b0;
}
.slider-2-score-section{
background-color: #bce0ba;
}

<div class="total">0</div>
<div class="slider-test-1">
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section" ><h2 class="heading-t2">1</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">2</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">3</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section" ><h2 class="heading-t2">4</h2></div>
<div class="slider-1-score-section"><h2 class="heading-t2">5</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">6</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section" ><h2 class="heading-t2">7</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">8</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">9</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-1-score-section" ><h2 class="heading-t2">10</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">11</h2></div>
<div class="slider-1-score-section" ><h2 class="heading-t2">12</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
</div>
<div class="slider-test-1">
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section" ><h2 class="heading-t2">1</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">2</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">3</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section" ><h2 class="heading-t2">4</h2></div>
<div class="slider-2-score-section"><h2 class="heading-t2">5</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">6</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section" ><h2 class="heading-t2">7</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">8</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">9</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
<div class="slider-test">
<div class="slider-score">
<div class="slider-2-score-section" ><h2 class="heading-t2">10</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">11</h2></div>
<div class="slider-2-score-section" ><h2 class="heading-t2">12</h2></div>
</div>
<p class="test-text">Description
</p>
</div>
</div>

好吧，您可以使用一个数组(此处为sliderScores(来跟踪每个滑块的选定分数。如果滑块分数在单击时更新，您可以添加一个单击事件处理程序来更新正确的数组项和总分数。

请注意，为了知道要更新哪个数组项，您必须以某种方式区分滑块，这里我分配了一个不同的类(slider-1-score-section和slider-2-score-section(。