使用nth-of-type与data-attribute实现hover链接切换div背景图脚本故障求助

问题原因 #

• 自定义选择器$$/$$$未定义，DOM元素选择失败
• 封装的Bo类仅完成定义未实例化，逻辑代码未执行
• 列表事件绑定放在链接遍历逻辑内，导致重复绑定、事件多次触发
• 外层自执行函数未调用，内部代码完全不运行
• 父容器#home__capabilities未设置相对定位，绝对定位的背景元素位置错位

修复后完整代码 #

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="home__capabilities">
  <img class="fill-background"  src="https://images.unsplash.com/photo-1428606381429-22224991fb0c">
  <div class="capabilities__list">
    <a href="#" data-capability="1">Link 01</a>
    <a href="#" data-capability="2">Link 02</a>
    <a href="#" data-capability="3">Link 03</a>
    <a href="#" data-capability="4">Link 04</a>
  </div>
  <div class="background__images">
    <img src="https://images.unsplash.com/photo-1427830574887-32e5702033b0">
    <img src="https://images.unsplash.com/photo-1427830180740-12146c79a1a3">
    <img src="https://images.unsplash.com/photo-1415226181422-279a51ca056e">
    <img src="https://images.unsplash.com/photo-1450885413713-176921f199b2">
  </div>
</section>

CSS代码 #

#home__capabilities {
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: center;
  /* 新增相对定位，约束内部绝对定位元素 */
  position: relative;
  overflow: hidden;
}
img.fill-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease;
}
img.fill-background.hidden {
  opacity: 0;
}
.capabilities__list {
  font-size: 50px;
  z-index: 10;
  padding-left: 2rem;
}
.capabilities__list a {
  display: block;
  color: #fff;
  text-decoration: none;
}
.capabilities__list a:hover {
  opacity: .5;
}
.background__images {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  z-index: 1;
}
.background__images img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateZ(0) scale(1.01);
  transform-origin: left center;
  transition: opacity .2s ease-in-out,transform .4s ease;
}
.background__images img.active {
  opacity: 1;
}

JS代码 #

!(function () {
  // 实例化功能类直接执行逻辑
  new Bo();
  function Bo() {
    const links = document.querySelectorAll(".capabilities__list a"),
          list = document.querySelector(".capabilities__list");
    // 链接hover事件绑定
    links.forEach(link => {
      link.addEventListener("mouseover", function () {
        const idx = this.getAttribute("data-capability");
        const targetImg = document.querySelector(".background__images img:nth-of-type(" + idx + ")");
        targetImg && targetImg.classList.add("active");
      });
      link.addEventListener("mouseout", function () {
        const idx = this.getAttribute("data-capability");
        const targetImg = document.querySelector(".background__images img:nth-of-type(" + idx + ")");
        targetImg && targetImg.classList.remove("active");
      });
      link.addEventListener("click", function (e) {
        e.preventDefault();
        window.capability = this.getAttribute("data-capability");
      });
    });
    // 列表整体hover事件绑定，移到循环外避免重复绑定
    list.addEventListener("mouseover", function () {
      const defaultBg = document.querySelector("#home__capabilities img.fill-background");
      defaultBg && defaultBg.classList.add("hidden");
    });
    list.addEventListener("mouseout", function () {
      const defaultBg = document.querySelector("#home__capabilities img.fill-background");
      defaultBg && defaultBg.classList.remove("hidden");
    });
  }
})();

功能说明 #

• 鼠标移入链接列表区域时，默认背景图自动隐藏
• hover单个链接时，对应序号的背景图会显示，移出后隐藏
• 鼠标完全离开链接列表后，默认背景图恢复显示
• 点击链接会将对应序号存储到全局变量window.capability中

内容的提问来源于stack exchange，提问作者Schakelen