@ozerovlife

Как можно переписать код?

Здравствуйте, накатал простой код на js для слайдера. Меня сильно смущает многоразовое использование обработчика "oncklick". Так как я сильно начинающий разработчик на js, прошу опытных товарищей немного раскритиковать мой код, указать на неточности или недочеты. В идеале хотелось бы увидеть как можно мой код переписать на что то более валидное.
П.Сы. интересует только js.

https://jsfiddle.net/ozerovwebmaster496/7yh2ntec/1/
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
Вот так его можно переписать

// Просто храним все значения left в массиве
const switchActiveStyles = [
  [0, 1000, 2000, 3000, 4000],
  [-1000, 0, 1000, 2000, 3000],
  // и т.д.
]

const activeSwitcherClassName = 'active-switcher'

function activeSwitcherFinder() {
  // Перебор не нужен, активный максимум один
  const active = arr_btn.find(({ classList }) => classList.contains(activeSwitcherClassName)) 
  if (active) active.remove(activeSwitcherClassName)
}

// Найти все можем в цикле
const arr_btn = Array.from([,,,,,], (_, ind) => document.querySelector('.mod-' + ind))
const arr_wraps = Array.from([,,,,,], (_, ind) => document.querySelector('.display-wrap_' + ind))

arr_btn.forEach((btn, ind) => {
  btn.onclick = () => {
    activeSwitcherFinder()
    btn.classList.add('active-switcher')

    // Получаем соответствующий набор значений для left И устанавливаем в цикле
    switchActiveStyles[ind].forEach((style, ind) => {
      arr_wraps[ind].style.left = style + 'px'
    })
  }
})
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
IonDen
@IonDen
JavaScript developer. IonDen.com
Первое что вам нужно изучить сейчас - циклы.
Программист всегда имеет дело с неизвестным количеством элементов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы