Добавлялся class при клике

Question

Всем привет. Как сделать так чтобы во всех span (их например 6шт на странице) менялся class при клике. Сейчас меняется только на первом, необходимо на всех сразу и обратно. Заранее благодарен!

<span id="open_w" class="scroll"></span>
<span id="open_w" class="scroll"></span>
<span id="open_w" class="scroll"></span>
<span id="open_w" class="scroll"></span>
<div id="open">Открыть</div>

$(function() {
     $("#open").click(function() {
         $("#open_w").toggleClass('active')
     });
});

Answer 1

$(function() {
     $("#open").click(function() {
         $(".open_w").toggleClass('active')
     });
});

.active{color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="open_w scroll">1</span>
<span class="open_w scroll">2</span>
<span class="open_w scroll">3</span>
<span class="open_w scroll">4</span>
<div id="open">Открыть</div>

Answer 2

НА чистом js так. Пройти циклом по всем элементом с классом scroll и добавить класс active

const open = document.getElementById('open')
const open_w = document.querySelectorAll('.scroll');

open.addEventListener('click', function() {
  for (let index = 0; index < open_w.length; index++) {
    open_w[index].classList.toggle('active');
  };
});

<span class="scroll"></span>
<span class="scroll"></span>
<span class="scroll"></span>
<span class="scroll"></span>
<div id="open">Открыть</div>

БЛОГ НА HUSL

Добавлялся class при клике

Ответы (2 шт):