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

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

这是一个使用事件委托(delegate)和数据属性将缩略图和主图像绑定(bind)在一起的模型。

// 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>