为页面 Javascript 上的多个元素保持选中状态

Question

我正在尝试添加一个更改所选元素外观的功能，允许通过页面进行多项选择，但每张幻灯片只能选择一个。您能否提一些建议？这是小提琴：codepen.io/rebekaranna/pen/gOrXzdp 非常感谢！

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();
  })
});

function select (elem) {
  var a = document.getElementsByTagName('slider-1-score-section');
  for (i = 0; i < a.length; i++) {
    a[i].classList.remove('active');
  }
  elem.classList.add('active');
}

.active {
  color: blue;
  background-color: red;
}

<div class="container-test">
  <div class="heading-box">
    <h3 class="heading-t3">select your score 1</h3>
    <div class="heading-line"></div>
  </div>
  <div class="slider-test-1">
    <div class="slider-test">
      <div class="slider-score">
        <div class="slider-1-score-section" onclick="select(this)"><h2 class="heading-t2">1</h2></div>
        <div class="slider-1-score-section" onclick="select(this)"><h2 class="heading-t2">2</h2></div>
        <div class="slider-1-score-section" onclick="select(this)"><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>
<div class="container-test">
  <div class="heading-box">
    <h3 class="heading-t3">select your score 2</h3>
    <div class="heading-line"></div>
  </div>
  <div class="slider-test-2">
    <div class="slider-test">
      <div class="slider-score">
        <div class="slider-2-score-section" onclick="select(this)"><h2 class="heading-t2">1</h2></div>
        <div class="slider-2-score-section" onclick="select(this)"><h2 class="heading-t2">2</h2></div>
        <div class="slider-2-score-section" onclick="select(this)"><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>
</div>
<div class="grid-line"></div>
<div class="total">0</div>

Answer 1

使用 document.getElementsByClassName('slider-1-score-section') 代替 document.getElementsByTagName('slider-1-score-section')。