Есть ли эффективный способ динамического добавления и удаления класса при изменении размера окон с помощью медиа-запросо ⇐ Jquery

[Anonymous]

У меня есть следующий HTML-код:

Я хочу вставить строку с именем noWidth в класс typeOfFood , только если размер окна составляет 540 пикселей. Если размер окна изменяется до размера окна более 540 пикселей, я хочу удалить класс noWidth и просто отобразить класс typeOfFood .

Вот как я подошел к этому в jQuery:

var $window = $(окно), $classnamechange = $('div.typeOfFood'); $(window).on('resize', function () { если ($window.width() < 540) { $classnamechange.addClass('noWidth'); } еще { $classnamechange.removeClass('noWidth') }; }); Этот код работает, но мне интересно, есть ли лучший подход к решению этого типа сценария? Допустим, у меня есть другой HTML, например

Я также хочу добавить и удалить noWidth в классе typeOfDrink . Будет ли мой код по-прежнему эффективен для работы с несколькими классами?