检查两个数据属性是否匹配，然后将类添加到元素

Question

我正在尝试创建一个方案数据位置和一个活动类被添加到幻灯片元素中。

我目前试图解决此问题的尝试遇到了阅读"幻灯片"位置的属性的问题。我假设这是某种范围的问题，但是需要一些帮助来解决这个问题。

var sliderNav = document.getElementById('sliderNav');
var paraIns = new Parallax(sliderNav);
var thumbs = document.querySelectorAll('.thumbnail');
var thumbsArr = Array.prototype.slice.call(thumbs);
var slides = document.querySelectorAll('.slider__img');
var slidesArr = Array.prototype.slice.call(slides);
for (var i = 0; i < slides.length; i++) {
  slides[i].setAttribute('data-position', i);
} 
for (var i = 0; i < thumbs.length; i++) {
  thumbs[i].setAttribute('data-position', i);
  thumbs[i].addEventListener('mouseenter', function(){
    console.log('Current thumbnail index is ' + this.dataset.position);
    if (slides.dataset.position == this.dataset.position) {
      slides.classList.add('active');
    } else {
      slides.classList.remove('active');
    }
  });
}

<div class="slider">
  <div id="sliderImages" class="slider__container">
    <div class="slider__img"></div>
    <div class="slider__img"></div>
    <div class="slider__img"></div>
    <div class="slider__img"></div>
    <div class="slider__img"></div>
    <div class="slider__img"></div>
    <div class="slider__img"></div>
  </div>
  <div id="sliderNav" class="slider__navigation" data-relative-input="true">
  <a href="#" class="thumbnail" data-depth="0.2">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.4">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.6">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.8">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.6">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.4">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.2">
    <div class="thumbnail__img"></div>  
  </a>
</div>
</div>

Answer 1

这是一个使用事件委托和数据术的模型，将拇指和主图像绑定在一起。

// This clears down any image showing already
const hideAll = () => document.querySelectorAll('#sliderImages div').forEach(d => d.classList.remove('active'));
// Show the actual image we want by adding a class
const showSlide = (id) => document.querySelector(`#sliderImages div[data-image-id="${id}"]`).classList.add('active');
// Event delegation model means we can add new thumbs and they will just work.
document.addEventListener('mouseover', (e) => {
  if (e.target.matches('.thumbnail__img')) {
    hideAll();
    showSlide(e.target.dataset.imageId);
  }
});

.slider__container {
  font-weight: bold;
  border: 1px solid red;
  min-height: 150px;
}
.slider__img {
  display: none;
}
.active {
  display: block;
}

<div class="slider">
  <div id="sliderImages" class="slider__container">
    <div class="slider__img" data-image-id="1">Big image 1</div>
    <div class="slider__img" data-image-id="2">Big image 2</div>
    <div class="slider__img" data-image-id="3">Big image 3</div>
    <div class="slider__img" data-image-id="4">Big image 4</div>
    <div class="slider__img" data-image-id="5">Big image 5</div>
    <div class="slider__img" data-image-id="6">Big image 6</div>
    <div class="slider__img" data-image-id="7">Big image 7</div>
  </div>
  <div id="sliderNav" class="slider__navigation" data-relative-input="true">
    <a href="#" class="thumbnail" data-depth="0.2">
      <div class="thumbnail__img" data-image-id="1">Thumb 1</div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.4">
      <div class="thumbnail__img" data-image-id="2">Thumb 2</div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.6">
      <div class="thumbnail__img" data-image-id="3">Thumb 3</div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.8">
      <div class="thumbnail__img" data-image-id="4">Thumb 4</div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.6">
      <div class="thumbnail__img" data-image-id="5">Thumb 5</div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.4">
      <div class="thumbnail__img" data-image-id="6">Thumb 6</div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.2">
      <div class="thumbnail__img" data-image-id="7">Thumb 7</div>
    </a>
  </div>
</div>