Вопрос №55339 от пользователя Дмитрий Епихин в уроке «JQuery», курс «JS: DOM API»

Дмитрий Епихин

Не понимаю как мне сделать вращение элементов по кругу.

Посмотрите пожалуйста, почему не работает "firstItem" ?

https://ru.hexlet.io/code_reviews/416387

5 0

Станислав Дзисяк

Дмитрий, приветствую!

Не понимаю как мне сделать вращение элементов по кругу.

В коде вы же используете массив элементов. Используйте пограничные значения индексов: 0 и length -1 чтобы "перескочить" на элемент с нужным индексом.

Посмотрите пожалуйста, почему не работает "firstItem" ?

Обратите внимание, что на странице может присутствовать множество компонентов carousel. Необходимо реализовать логику функции так, чтобы работа происходила только с одним конкретным компонентом. Сейчас же при нажатии на кнопки, слайды меняются на всех компонентах сразу. Порекомендую вам вначале отладить вашу функцию используя веб-доступ, используйте в коде console.log для отладки.

1

Дмитрий Епихин

Станислав Дзисяк, подскажите пожалуйста.

Есть найденная через event кнопка (которая почему-то то "A", то "SPAN"). Пытаюсь найти ближайший к ней элемент с классом carousel-inner. Почему не работает поиск через closest?

https://ru.hexlet.io/code_reviews/416387

1

Станислав Дзисяк

Есть найденная через event кнопка (которая почему-то то "A", то "SPAN")

Такое поведение происходит потому, что клик совершается на разных элементах. Свойство события target возвращает элемент, который является инициатором события, то есть элемент на котором произошел клик. В вашем случае вы вероятно хотите получить элемент, который обрабатывает данное событие - <a>. Для этого вам нужно использовать свойство currentTarget.

Почему не работает поиск через closest?

Вначале нужно разобраться что именно делаем метод closest(). Данный метод возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору. Но обратите внимание, что блок div с классом carousel-inner не является родительским по отношению к элементу <a>, он находится с ним на одном уровне в DOM дереве.

2

Дмитрий Епихин

Станислав Дзисяк, задачу решил, есть пара вопросов. https://ru.hexlet.io/code_reviews/416387?submission_id=532255

  1. Вначале пробовал находить детей не через children, а через childNodes. В полученной коллекции, помимо элементов был какой-то текст. Откуда он там взялся? Ведь carousel-inner содержит только теги.

  2. Я так понял, решение учителя написано полностью на jQuery. От нас ожидали чего-то похожего? У нас же по jQuery был всего один урок.

  3. По решению учителя: Что за аргумент _index после each? Что за функция без аргументов внутри функции handlerGenerator (=> () =>)? Не понял вот эту строчку: "(id) => id === newCurrentIndex".

1

Станислав Дзисяк

Дмитрий, здорово что справились с заданием!

В полученной коллекции, помимо элементов был какой-то текст. Откуда он там взялся?

В этом состоит отличие использования childNodes от children. Свойство children включает только ноды элементов, а childNodes включает не только ноды элементов, но и ноды с текстом и комментариями. В данном случае между самими элементами находятся текстовый ноды содержащие переносы строк \n.

От нас ожидали чего-то похожего? У нас же по jQuery был всего один урок.

В рамках курса урок посвящен знакомству с библиотекой jQuery, чтобы получить в целом понимание о таком инструменте. Но плотно работать с ним в дальнейшем не предполагается, потому как на текущий момент встроенные возможности javascript позволяют полноценно работать с DOM.

Что за аргумент _index после each?

Метод each, принимает на вход функцию обработчик, которая в свою очередь принимает на вход два аргумента - индекс элемента и сам элемент. В данном случае нам нужно использовать только элемент, но если не указать первый аргумент возникнет ошибка. Обычно к именам неиспользуемых аргументов в начало имени добавляют символ нижнего подчеркивания, чтобы выделить их в коде.

Что за функция без аргументов внутри функции handlerGenerator (=> () =>)?

Это функция, которая при вызове возвращает другую функцию - вложенную. Если расписать подробнее, то выглядело бы это так:

const handlerGenerator = (next) => {
  const inner = () => {
    // тут тело функции
  };

  return inner;
};

Не понял вот эту строчку: "(id) => id === newCurrentIndex"

Это функция-предикат возвращающая булево значение - true/false.Метод filter должен принимать на вход такую функцию, чтобы отфильтровать нужные элементы из коллекции. В данном случае отфильтровываем все элементы индекс которых неравен newCurrentIndex. Таким образом останется только один элемент с индексом newCurrentIndex.

1

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев