如何在单击时切换具有相同 class 名称的多个元素

Question

单击切换按钮时如何将颜色从绿色更改为红色到所有行。如果我使用 getElementsbyClassName 或 querySelectorAll ，它似乎无法使用相同的 class 名称，如果我使用，只有第一行颜色会改变使用 querySelector 。如果我给每个段落一个不同的 id 或 class 名称，所有线条颜色都会改变。所以基本上我如何切换具有相同 class 名称的多个元素（在这种情况下 class 名称是 'para') 点击 ?这是我的 codepen link - https://codepen.io/fahim04blue/pen/KKNvOZe

html-

<button id='btn' type="button" class="btn btn-primary">toggle</button>
<br>
<br>
<div>
  <p class="para">Paragraph 1</p>
  <p class="para">Paragraph 2</p>
  <p class="para">Paragraph 3</p>
  <p class="para">Paragraph 4</p>
</div>

CSS -

.para{
  background-color:green;
}

.para.red{
  background-color:red;
}

原版 JS

const btn = document.getElementById('btn');
const para = document.querySelector('.para');

btn.addEventListener('click',()=>{
  para.classList.toggle('red');
})

Answer 1

您只选择了一个元素，将 querySelector 更改为 querySelectorAll，然后使用循环。

const btn = document.getElementById('btn');
const para = document.querySelectorAll('.para');

btn.addEventListener('click',()=>{
  para.forEach(el => {
    el.classList.toggle('red');
  })
})

Answer 2

const btn = document.getElementById('btn');
const para = document.querySelectorAll('.para');

btn.addEventListener('click',()=>{
  para.forEach(p => p.classList.toggle('red'));
})

您应该使用 forEach() 来更改 class 的所有元素。

如何在单击时切换具有相同 class 名称的多个元素

How to toggle multiple elements with same class name on click

html

javascript

css

onclick

toggle