Как определить порядковый номер объекта в JavaScript и использовать его для условия?

Question

[Alius999]

На сайте есть слайдер, под ним spot-ы переключатели. При наведении на каждый спот внешний вид соответствующего слайда изменяется через style.

Задача сделать так, чтобы при наведении(а можно и по клику) начиная с 4-го спота, контейнер скролился влево на ширину одного слайда.

Моя логика такая, нужно найти спот с индексом 4, загнать в условие if ( index > 3) {скролим контейнер влево на Npx} Подскажите пожалуйста как это реализовать на JavaScript.

Конкретно не понимаю каким образом укаpать JS, что спот на который наведён курсор имеет такой-то порядковый номер.

Или посоветуйте как сделать иным способом

HTML

<main>
  <section class="slider">
    <h2>Marketing Strategies</h2>
    <p>Join 40,000+ other marketers and get proven strategies on email marketing</p>
    <div class="slider-flex">
      <div class="slide slide-1">
        <img src="img/slider/slide-1.svg" alt="">
        <p>By <b>Abdullah</b> | 03 March 2019</p>
        <h3>Increasing Prosperity With Positive Thinking</h3>
      </div>

      <div class="slide slide-2">
        <img src="img/slider/slide-2.svg" alt="">
        <p>By <b>Abdullah</b> | 03 March 2019</p>
        <h3>Motivation Is The First Step To Success</h3>
      </div>

      <div class="slide slide-3">
        <img src="img/slider/slide-3.svg" alt="">
        <p>By <b>Abdullah</b> | 03 March 2019</p>
        <h3>Success Steps For Your Personal Or Business Life</h3>
      </div>


      <div class="slide slide-1">
        <img src="img/slider/slide-1.svg" alt="">
        <p>By <b>Abdullah</b> | 03 March 2019</p>
        <h3>Increasing Prosperity With Positive Thinking</h3>
      </div>

      <div class="slide slide-2">
        <img src="img/slider/slide-2.svg" alt="">
        <p>By <b>Abdullah</b> | 03 March 2019</p>
        <h3>Motivation Is The First Step To Success</h3>
      </div>

      <div class="slide slide-3">
        <img src="img/slider/slide-3.svg" alt="">
        <p>By <b>Abdullah</b> | 03 March 2019</p>
        <h3>Success Steps For Your Personal Or Business Life</h3>
      </div>
    </div>

    <div class="switch-spots">

    </div>
  </section>
</main>

JavaScript

let sliderFlex = document.querySelector('.slider-flex');

for (let i = 0; i < sliderFlex.children.length; i++) {

  let mainDiv = document.querySelector('.switch-spots');

  let newDiv = document.createElement('div');
  mainDiv.appendChild(newDiv);
  newDiv.classList.add('switch-spot');
  newDiv.style.background = "url('img/slider/switch-spot.svg')";
  mainDiv.style.width = mainDiv.offsetWidth + 10 + 'px';

}

let switchSpot = document.querySelectorAll('.switch-spot');

let singleSlide = document.querySelector('.slide');

let slideCollection = document.querySelectorAll('.slide');

let slideOne = document.querySelector('.slide-1');

let slideHovered = function(switcher, slide) {

  switcher.onmouseover = function(event) {
    slide.style.transform = 'translate(-10px, -10px)';
    slide.style.transform = 'scale(0.95)';
    switcher.style.background = "url('img/slider/switch-spot-active.svg')";

  }
}

let slideLeave = function(switcher, slide) {
  switcher.onmouseleave = function(event) {
    slide.style.transform = 'translate(0px, 0px)';
    slide.style.transform = 'scale(1)';
    switcher.style.background = "url('img/slider/switch-spot.svg')";
  }
}

for (let i = 0; i < switchSpot.length; i++) {

  slideHovered(switchSpot[i], slideCollection[i]);
  console.log(i);
}

for (let i = 0; i < switchSpot.length; i++) {
  slideLeave(switchSpot[i], slideCollection[i]);
}

Answer 1

[Alius999]

Решил задачу добавив код в цикл. Выглядит так.

for (let i = 0; i < switchSpot.length; i++) {
                
                slideHovered(switchSpot[i], slideCollection[i]);
    
                        switchSpot[i].onclick = function(event) {
                            console.log(i);
                        if (i >= 3) {
                            sliderFlex.scrollLeft = slideOne.clientWidth + 250;
                        } else if (i < 3) {
                            sliderFlex.scrollLeft += 0;
                        }
                    }
    
            }

Теперь контейнер скролится после нажатия на 4-ю кнопку. Но срабатывает 1 раз при клике на кнопку от 3-ей до 6-ой. Подскажите какой метод можно использовать чтобы делать клик обрабатывался каждый раз?

Comments

[Сергей Сергей]

+= заменить на простое =

[Alius999]

Спасибо, но не по теме вопроса