JavaScript в Bootstrap 5
Я новичок в создании веб-страниц и только начал создавать их с помощью Bootstrap 5. Я хочу добавить/удалить класс начальной загрузки «bg-opacity» в свою панель навигации в зависимости от ширины области просмотра и думаю, что смогу сделать это с помощью JS. Но найденная мной функция не работает, потому что BS больше не использует JQuery. Есть ли простой способ добавить/удалить классы, существующие в Bootstrap 5?
Буду очень рад ответу.
Приветствую и заранее спасибо :)
Я пытался использовать эту функцию
jQuery(document).ready(function($) {
var alterClass = function() {
var ww = document.body.clientWidth;
if (ww < 767) {
$('.navbar').addClass('bg-opacity-75');
} else if (ww >= 768) {
$('.navbar').removeClass('bg-opacity-75');
};
};
$(window).resize(function(){
alterClass();
});
//Fire it when the page first loads:
alterClass();
});
@Ричи jQuery — это псевдоним $.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете написать медиа-запросы в JS с помощью window.matchMedia() и переключать класс в зависимости от того, соответствует ли запрос или нет.
Здесь мы проверяем наличие min-width: 768px. Если размер вашего экрана меньше 768 пикселей, mediaQuery.matches будет false. Если ваш экран 768 пикселей или выше, то mediaQuery.matches будет true.
На основе этого логического значения он добавит или удалит класс с помощью метода classList.toggle().
const navBar = document.querySelector('.navbar');
const mediaQuery = matchMedia('(min-width: 768px)');
function alterClass(match) {
navBar.classList.toggle('bg-opacity-75', !match);
}
alterClass(mediaQuery.matches);
mediaQuery.addEventListener('change', (event) => {
alterClass(event.matches);
});
Эй, спасибо за быстрый ответ. Я попробовал ваш код, но он почему-то не работает. Я добавил console.info() после двух констант, чтобы увидеть, что возвращает mediaQuery. Он всегда возвращает «соответствия: false», независимо от того, какой размер окна я использую. Я думаю, что так не должно быть, судя по вашему ответу? Есть предложения, в чем может быть проблема?
Спасибо за ответ. Я проверил еще раз и заметил, что не создал действительный медиа-запрос. Скобки вокруг запроса отсутствовали. Теперь он будет работать так, как ожидалось.
Большое спасибо, теперь все работает. JavaScript все еще для меня новичок, думаю, когда я углублюсь в него немного больше, я мог бы сам найти эту небольшую синтаксическую ошибку, но сейчас я все еще очень сильно завишу от функций других людей.
Разве все jquery не начинаются с
$?