如何解决分配和计数分数，保持选中状态
我正在寻找与他类似的解决方案，但没有选择/选项，因为我没有下拉列表！ How to use Javascript to keep a running score on multiple choice 因此，我在页面上有多个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）。 预先感谢您的帮助！
解决方法
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）。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
