Как правильно присвоить класс?

Question

[Olddd]

Мне надо, чтобы класс присваивался только при ширинах меньше 992 пикселей, вот код сейчас:

var $width = $(window).width();
        if (!$width < 992) {
            $('body').toggleClass('lock');
        }

Answer 1

[Дмитрий Беляев]

const mediaQuery = window.matchMedia('(max-width: 992px)');
const handler = () => 
    $(document.body).toggleClass('lock', mediaQuery.matches);
mediaQuery.addListener(handler);
handler();

https://developer.mozilla.org/ru/docs/Web/API/Wind...

А вообще, такое спокойно через CSS можно делать:

@media (max-width: 992px) {
    body {
        /* тут то что у Вас в .lock было */
    }
}

Comments

[Сергей delphinpro]

Можно сократить блок условия до одной строки

$(document.body).toggleClass('lock', mediaQuery.matches);

[Дмитрий Беляев]

Сергей delphinpro, спасибо за замечание, обновил ответ

Answer 2

[lUser L]

https://jsfiddle.net/5z1Lbpua/ - например так, в jq есть resize

Answer 3

[Spartak (Web-StyleStudio)]

if ($width < 992) {
	$('body').addClass('lock');
} else {
	$('body').removeClass('lock');
}