Question

我正在尝试创建一个场景，当用户将鼠标悬停在缩略图上时，它会找到缩略图的data-position属性，并将其与具有相同数据位置的幻灯片进行匹配，并获得一个活动类已添加到幻灯片元素。

我目前解决该问题的尝试在读取“幻灯片”的仓位属性时遇到问题。我假设这是某种范围的问题，但在尝试解决该问题时需要一些帮助。

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>

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

1 个答案: