Где ошибка в коде?

const slides = [
  $('.first-slide'),
  $('.second-slide'),
  $('.third-slide')
]
const buttons = [
  $('.b-string-left'),
  $('.b-string-right')
]

let activeSlide = 0


buttons[1].click(function () {

  slides[0].fadeOut(0)
  slides[1].fadeIn(1000)
  activeSlide++
  console.log(activeSlide)

if (activeSlide == 1)
  buttons[1].click(function () {
    slides[1].fadeOut(0)
    slides[2].fadeIn(1000)
    activeSlide++;
    console.log(activeSlide)


  })
})


Если я кликаю первый раз на кнопку значение актив слайд становится 1 и меня перекидывает на следующий слайд, если я кликаю второй раз по кнопке то мне в консоль выводится сразу два значения 2 и 3, то есть значение актив слайд. Почему так? Почему он просто перескаивает на цифру 3?
Я пробовал переставлять скобки функции и это срабатывало, но тогда слайд не менялся. В чем проблема?
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
potapchino
@potapchino
element.click(fn) - .click() добавляет на element обработчик события клика. как только на element произойдет клик выполнится func. т.к. .click() добавляет обработчик, а не заменяет его, то fn1, fn2, fn3 будут одновременно выполнятся в том порядке в котором их добавили, каждый раз, когда на кнопку будут кликать, что и происходит в вашем коде выше.
button.click(fn1)
button.click(fn2)
button.click(fn3)


spoiler
buttons[1].click(function(){
  // в случае если activeSlide равен 1:
  //   скрываем второй и показываем третий слайды,
  //   увеличиваем переменную activeSlide на единицу,
  //   затем выходим из функции.
  //   в этом случае, все что ниже return, не выполнится.
  if (activeSlide == 1) {
    slides[1].fadeOut(0);
    slides[2].fadeIn(1000);
    activeSlide++;
    return;
  }
  
  // в противном случае выполнится этот код,
  //   а не тот который написан выше в блоке if () {}
  slides[0].fadeOut(0);
  slides[1].fadeIn(1000);
  activeSlide++;
})
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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