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

Question

我正在寻找与他类似的解决方案，但没有选择/选项，因为我没有下拉菜单！ 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）。 如果您能提供帮助，请提前感谢您！

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）。