Помогите переписать скрипт с jquery на js

211

20 августа 2018, 13:30

$('.call-me-modal').click(function () {
    var buttonId = $(this).attr('modal');
    $('#modal-container').removeAttr('class').addClass(buttonId);
    $('body').addClass('modal-active');
})
$('h1').click(function () {
    $('#modal-container').addClass('out');
    $('body').removeClass('modal-active');
});

Благодарю

Answer 1

Как то так:

const callMeModals = document.querySelectorAll('.call-me-modal');
[...callMeModals].forEach(modal => {
    const buttonId = modal.getAttribute('modal');
    const modalContainer = document.getElementById('modal-container');
    modalContainer.setAttribute('class', buttonId);
    document.body.classList.add('modal-active');
});
const titles = document.querySelector('h1');
[...titles].forEach(title => {
    const modalContainer = document.getElementById('modal-container');
    modalContainer.classList.add('out');
    document.body.classList.remove('modal-active');
});

querySelectorAll - возвращает коллекцию элементов, а не массив, поэтому для доступа к методу forEach используем spread оператор [...], он превратит коллекцию в массив

P.S.
classList вроде не шибко кроссбраузерный и вместо него можно использовать функцию хэлпер, которая будет работать через set/getAttribute, но это выходит за рамки вопроса ( сами )