Очень круто, что вы делаете такие ролики по JS, т.к на ютубе мало таких уроков, либо они уже устаревшие. С вами очень приятно изучать JavaScript. Спасибо!
Использовать classList.contains() для проверки на соответствие элемента по селектору как-то странно. Потому что аргумент функции задан как tabSelector, а селектор, все-таки, это не просто точка и название класса. Селектором может быть ID, может быть класс, может быть тэг, а может быть все вместе. Ты сам передаешь в качестве contentSelector составной селектор. А теперь представь, что сторонний программист будет работать над твоим кодом и, увидев в подсказке название аргумента + увидев, что ты в схожий аргумент передаешь составной селектор, сделает тоже самое и для селектора таба. И что тогда получится? Ошибка. Поэтому нужно либо менять аргумент на tabClassName, либо для проверки использовать не classList.contains(), а функцию matches(). Здесь же идет проверка на соответствие родительского элемента. Только есть одно НО - твоя проверка учитывает вложенность не более одного уровня. То есть если внутри таба будет див, а внутри этого дива будет другой див, то клик по последнему диву не будет вызывать никаких действий, т.к. его родительский элемент не содержит класс, который должен содержать таб. Вместо этого тебе нужно использовать функцию closest(), которая перебирает все родительские элементы и проверяет их на переданный тобой селектор Регулярка, кстати, не нужна здесь. Есть более простая реализация в виде ф-ции substring. В нее просто передаешь единицу и получаешь ту же самую строку без точки вначале
Забыл добавить насчет бесполезности регулярки. Регулярки используют либо если у тебя идет глобальная замена в строке, либо если какая-та сложная замена, где действительно без регулярки никак. Поиск точки ни к одному, ни к другому варианту не относится. Тебе просто можно написать replace(".", "")
не могу понять почему не работает анимация на сайте? через нпм установили же jquery, animate css подключен и классы все прописаны, но не работает. подключив вручную jquery и wow js все заработало, думал что установлю wow js через npm и будет ок, но увы все также без движения
Спасибо огромное, если можно вопрос, зачем блок с отделкой балкона делать слайдером, нельзя просто с помощью якорных ссылок сделать или это типа понты, что мы тоже классно вестаем
Знаешь в чем минус, ты не проверяешь по ходу все ли работает, а проверяешь только в конце и если смотреть, то потом в конце приходится искать в куче строк где же ошибка
Спасибо за урок! Универсальные решения - просто огонь! Не понял только почему мы в main.js передаем аргументы для табов, почему не сделали по аналогии с модальными в самой функции tabs? И подскажи плиз по поводу проверки на наличие самого target в обработчике события, что это могут быть за элементы, которые не поддерживают события клика - конкретный пример?
Как и говорил в уроке - можно спрятать во внутрь функционал, а можно вынести наружу. В модалках было много действий внутри модуля - и я их спрятал, в табах - только одно. Классический пример - тэг )
Очень круто, что вы делаете такие ролики по JS, т.к на ютубе мало таких уроков, либо они уже устаревшие. С вами очень приятно изучать JavaScript. Спасибо!
основы не могут быть устаревшими
Как всегда, на высоте ))). Спасибо за труды, Иван! )))
Использовать classList.contains() для проверки на соответствие элемента по селектору как-то странно. Потому что аргумент функции задан как tabSelector, а селектор, все-таки, это не просто точка и название класса. Селектором может быть ID, может быть класс, может быть тэг, а может быть все вместе. Ты сам передаешь в качестве contentSelector составной селектор. А теперь представь, что сторонний программист будет работать над твоим кодом и, увидев в подсказке название аргумента + увидев, что ты в схожий аргумент передаешь составной селектор, сделает тоже самое и для селектора таба. И что тогда получится? Ошибка. Поэтому нужно либо менять аргумент на tabClassName, либо для проверки использовать не classList.contains(), а функцию matches().
Здесь же идет проверка на соответствие родительского элемента. Только есть одно НО - твоя проверка учитывает вложенность не более одного уровня. То есть если внутри таба будет див, а внутри этого дива будет другой див, то клик по последнему диву не будет вызывать никаких действий, т.к. его родительский элемент не содержит класс, который должен содержать таб. Вместо этого тебе нужно использовать функцию closest(), которая перебирает все родительские элементы и проверяет их на переданный тобой селектор
Регулярка, кстати, не нужна здесь. Есть более простая реализация в виде ф-ции substring. В нее просто передаешь единицу и получаешь ту же самую строку без точки вначале
Забыл добавить насчет бесполезности регулярки. Регулярки используют либо если у тебя идет глобальная замена в строке, либо если какая-та сложная замена, где действительно без регулярки никак. Поиск точки ни к одному, ни к другому варианту не относится. Тебе просто можно написать replace(".", "")
Спасибо за комментарий, интересно было прочитать!
Мне новичку самое то что нужно для практики. Спасибо, Иван.
Спасибо за урок! Чет только запуталась какие именно классы в функцию закидывать. Надо потом еще пересмотреть)
Однозначно лайк! Благодарю за видео! :)
Круто!Спасибо , с нетерпением жду следующую часть
Спасибо! Очень полезный контент!
в 1-ом табе class active добавляется к блоку ,на который ни как не влияет..там его надо к ссылке добавлять внутри блока это в тз нарисовано
Спасибо
сложновато, но универсально
не могу понять почему не работает анимация на сайте? через нпм установили же jquery, animate css подключен и классы все прописаны, но не работает. подключив вручную jquery и wow js все заработало, думал что установлю wow js через npm и будет ок, но увы все также без движения
Спасибо огромное, если можно вопрос, зачем блок с отделкой балкона делать слайдером, нельзя просто с помощью якорных ссылок сделать или это типа понты, что мы тоже классно вестаем
Потому что лучше выглядит
Знаешь в чем минус, ты не проверяешь по ходу все ли работает, а проверяешь только в конце и если смотреть, то потом в конце приходится искать в куче строк где же ошибка
Спасибо за урок! Универсальные решения - просто огонь! Не понял только почему мы в main.js передаем аргументы для табов, почему не сделали по аналогии с модальными в самой функции tabs? И подскажи плиз по поводу проверки на наличие самого target в обработчике события, что это могут быть за элементы, которые не поддерживают события клика - конкретный пример?
Как и говорил в уроке - можно спрятать во внутрь функционал, а можно вынести наружу. В модалках было много действий внутри модуля - и я их спрятал, в табах - только одно.
Классический пример - тэг )
Зачем так напрягаться?
1. target.classList.contains(tabSelector.replace(/\./, '')) === target.matches(tabSelector)
2. tab.forEach((item, i) => {
if (target == item || target.parentNode == item) {
hideTabContent();
showTabContent(i);
}
})
===
hideTabContent();
showTabContent(Array.from(tab).findIndex(el => target === el || target.parentNode === el))
А зачем все это писать вручную когда есть Бутстрап?
ну как бы там написано в тз что на нативном писать нужно