Почему класс удаляется, а потом не добавляется?
Недавно начал изучать JS.
И вот на практике не могу понять, почему удаляется, но не присваивается обратно класс lock у body?
Суть кода в том, что по клику на кнопку должна закрыться первая форма и открыться вторая, при этом удалить и потом снова добавить класс lock для body.
<body> <form action="#" class="first-form"> <h2>First form</h2> <button type="submit" class="submit">SUBMIT</button> <button class="btn">Open second form</button> </form> <form action="#" class="second-form"> <h2>Second form</h2> <input type="text" class="name" placeholder="Name"> <button type="submit">SUBMIT</button> </form> </body> |
<body> <form action="#" class="first-form"> <h2>First form</h2> <button type="submit" class="submit">SUBMIT</button> <button class="btn">Open second form</button> </form> <form action="#" class="second-form"> <h2>Second form</h2> <input type="text" class="name" placeholder="Name"> <button type="submit">SUBMIT</button> </form> </body>
const body = document.body; const firstForm = body.querySelector(".first-form"); const secondForm = body.querySelector(".second-form"); const btn = firstForm.querySelector(".btn"); function bodyLock() { body.classList.add("lock"); } function bodyUnlock() { body.classList.remove("lock"); } function openForm(form) { if (!form.classList.contains("show")) { form.classList.add("show"); bodyLock(); } } function closeForm(form) { if (form.classList.contains("show")) { form.classList.remove("show"); bodyUnlock(); } } btn.addEventListener("click", (e) => { e.preventDefault(); closeForm(firstForm); openForm(secondForm); }); |
const body = document.body; const firstForm = body.querySelector(".first-form"); const secondForm = body.querySelector(".second-form"); const btn = firstForm.querySelector(".btn"); function bodyLock() { body.classList.add("lock"); } function bodyUnlock() { body.classList.remove("lock"); } function openForm(form) { if (!form.classList.contains("show")) { form.classList.add("show"); bodyLock(); } } function closeForm(form) { if (form.classList.contains("show")) { form.classList.remove("show"); bodyUnlock(); } } btn.addEventListener("click", (e) => { e.preventDefault(); closeForm(firstForm); openForm(secondForm); });
Дополнительно:
Запустил и всё работает, как вы описали. Это полный контекст задачи или есть что-то ещё?
Нет, не полный. Сам код большой, я лишь основную часть выложил. Если всё работает, значит в другой части кода проблема.
На codepen выложу и пришлю ссылку. Сам разобраться не могу пока.
Всё никак не мог время уделить из-за работы. В общем, думаю проблема в функциях bodyLock и bodyUnLock, потому что эти функции не только класс добавляют, а также стилизуют body и его позицию указывают в момент блокировки.
Посмотрите, пожалуйста.
const lockPadding = document.querySelectorAll(".lock-padding"); function bodyLock() { const lockPaddingValue = window.innerWidth - wrapper.offsetWidth + "px"; // ширина скролла. let pagePosition = window.scrollY; /* положение скролла */ if (lockPadding.length > 0) { /* фиксированные объекты*/ for (let index = 0; index < lockPadding.length; index++) { const el = lockPadding[index]; el.style.paddingRight = lockPaddingValue; } } body.style.paddingRight = lockPaddingValue; body.classList.add("lock"); body.dataset.position = pagePosition; body.style.top = -pagePosition + "px"; } function bodyUnLock() { setTimeout(function () { let pagePosition = parseInt(body.dataset.position, 10); body.style.top = "auto"; /* стили body */ if (lockPadding.length > 0) { for (let index = 0; index < lockPadding.length; index++) { const el = lockPadding[index]; el.style.paddingRight = "0px"; } } body.style.paddingRight = "0px"; body.classList.remove("lock"); window.scroll({ top: pagePosition, left: 0 }); /* положение скролла */ body.removeAttribute("data-position"); }, timeout); } |
const lockPadding = document.querySelectorAll(".lock-padding"); function bodyLock() { const lockPaddingValue = window.innerWidth - wrapper.offsetWidth + "px"; // ширина скролла. let pagePosition = window.scrollY; /* положение скролла */ if (lockPadding.length > 0) { /* фиксированные объекты*/ for (let index = 0; index < lockPadding.length; index++) { const el = lockPadding[index]; el.style.paddingRight = lockPaddingValue; } } body.style.paddingRight = lockPaddingValue; body.classList.add("lock"); body.dataset.position = pagePosition; body.style.top = -pagePosition + "px"; } function bodyUnLock() { setTimeout(function () { let pagePosition = parseInt(body.dataset.position, 10); body.style.top = "auto"; /* стили body */ if (lockPadding.length > 0) { for (let index = 0; index < lockPadding.length; index++) { const el = lockPadding[index]; el.style.paddingRight = "0px"; } } body.style.paddingRight = "0px"; body.classList.remove("lock"); window.scroll({ top: pagePosition, left: 0 }); /* положение скролла */ body.removeAttribute("data-position"); }, timeout); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, когда класс удаляется, но потом не добавляется, может быть вызвана несколькими причинами. Вот некоторые из них и способы их решения:
1. Проверьте правильность написания класса в вашем CSS. Убедитесь, что вы правильно указали имя класса в своем CSS файле или встроенном стиле.
2. Проверьте, не перезаписывается ли ваш класс другим CSS правилом. Иногда возможно, что другое CSS правило перезаписывает ваш класс, поэтому убедитесь, что ваш класс имеет приоритет или используйте !important для принудительного применения вашего класса.
3. Проверьте, не содержит ли ваш HTML элемент другие классы. Если ваш HTML элемент уже имеет другие классы, убедитесь, что вы правильно добавляете и удаляете классы с учетом других классов элемента.
4. Убедитесь, что ваш скрипт корректно добавляет и удаляет классы. Проверьте свой JavaScript код на наличие ошибок и убедитесь, что вы используете правильные методы для добавления и удаления классов, например, addClass() и removeClass().
Приведу пример использования методов addClass() и removeClass() в jQuery:
$(document).ready(function(){ $('#myElement').removeClass('oldClass').addClass('newClass'); });
Если после выполнения вышеуказанных шагов проблема все еще остается, возможно, в ней заложена более глубокая причина, такая как конфликт между различными библиотеками или фреймворками. В этом случае, рекомендуется более детальное изучение вашего кода и окружения, чтобы выявить и устранить возможные конфликты.