Can anyone help turn this javascript into jQuery?

var d = document; d.addEventListener('DOMContentLoaded', function () { var cirles = [].slice.call(d.querySelectorAll('.circle')); [].forEach.call(d.querySelectorAll('button'), function (but) { but.addEventListener('click', function () { var act = this.dataset.action; cirles.forEach(function (el) { el.classList[act]('active'); }); }, false); }); cirles.forEach(function (el) { el.addEventListener('click', toggleCirсleClass); }); function toggleCirсleClass() { this.classList.toggle('active'); } }, false); 
 .circle { display: inline-block; width: 100px; height: 100px; background: #999; border-radius: 50%; } .active { background: #333; } 
 <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <span class="circle"></span> <button data-action="add">Вкл.</button> <button data-action="remove">Выкл.</button>

Closed due to the fact that off-topic by the participants Kromster , Pavel Mayorov , Denis Bubnov , αλεχολυτ , Yaroslav Molchan Jun 15 '17 at 13:53 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • "The message contains only the text of the task, in which there is no description of the problem, or the question is purely formal (" how do I do this task ") . To reopen the question, add a description of the specific problem, explain what does not work, what you see the problem. " - Kromster, Pavel Mayorov, Denis Bubnov, αλεχολυτ, Yaroslav Molchan
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • What have you done to solve the problem yourself? What exactly did not work out? - Dmitriy Simushev
  • And "how to" - this is how? - Vladimir Martyanov

1 answer 1

Like this: http://jsfiddle.net/IonDen/b9q5mw7x/

 $(document).ready(function () { $(document).on('click', '.circle', function () { $(this).toggleClass('active'); }); $(document).on('click', 'button', function () { var action = $(this).data('action'); $circles = $('.circle'); if (action === 'add') { $circles.addClass('active'); } else { $circles.removeClass('active'); } }); });
  • Aha, so, thanks)) - Alex Prosto