分配和计算分数，保持选择

Question

我正在寻找与他类似的解决方案，但没有 select/option，因为我没有下拉菜单！所以我在页面上有多个 div，我需要给它们分配分数，并根据页面上 selected 的元素计算总分。我希望有人能提供帮助 - 将不胜感激！

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

select 你的分数

                <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，如 headers 中所述，总分应为每个滑块获得的分数（例如，滑块 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）来跟踪每个滑块的选定分数。如果滑块分数在点击时更新，您可以添加一个点击事件处理程序来更新适当的数组项和总分。

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

分配和计算分数，保持选择

Assign and count score, stay selected

javascript

html

jquery

multipleselection