分配和计数分数，保持选中状态

问题描述

我正在寻找与他类似的解决方案，但没有选择/选项，因为我没有下拉列表！ 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）。