Javascript nth-of-type 和数据属性（更改悬停链接上的背景图像）

Posted 2023-03-05

【中文标题】Javascript nth-of-type 和数据属性（更改悬停链接上的背景图像）

【英文标题】：Javascript nth-of-type and data-attribute (change background images on hover links)

【发布时间】：2021-12-30 19:56:49

【问题描述】：

我无法运行以下脚本。

这个想法是交换 div 的背景图像，一旦链接与其相应的数据属性悬停。为了清楚起见，链接和背景图片都是分开列出的。

有人可以帮我解决吗？

Ps：这里的 Codepen 示例：https://codepen.io/eric-schakel/pen/qBXvgoM

!(function (t) 

  class Bo 
    constructor(t) 
      const e = $$$(".capabilities__list a"),
            i = $$(".capabilities__list");
      e.forEach((t) => 
        t.addEventListener("mouseover", function () 
          const e = t.getAttribute("data-capability");
          $$(".background__images img:nth-of-type(" + e + ")").classList.add("active");
        ),
          t.addEventListener("mouseout", function () 
          const e = t.getAttribute("data-capability"),
                i = $$(".background__images img:nth-of-type(" + e + ")");
          i && i.classList.remove("active");
        ),
          t.addEventListener("click", function () 
          window.capability = this.getAttribute("data-capability");
        ),
          i.addEventListener("mouseover", function () 
          $$("#home__capabilities img.fill-background").classList.add("hidden");
        ),
          i.addEventListener("mouseout", function () 
          const t = $$("#home__capabilities img.fill-background");
          t && t.classList.remove("hidden");
        );
      );
    
  
  
);

#home__capabilities 
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: center;


img.fill-background 
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;


img.fill-background.hidden 
  opacity: 0;


.capabilities__list 
  font-size: 50px;
    z-index: 10;


.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;

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

【问题讨论】：

到目前为止一切顺利，将代码放在这里。

感谢您的帮助。修复了语法错误，但不确定 $$ 和 $$$。关于重写没有符号的脚本有什么建议吗？

Wuuw，这让我很头疼。 javascripts 太深了，很快，但让它工作会很好。

【参考方案1】：

这里

我更改了一些我希望委托更多的事情，但这会过多地更改您的代码。

语法错误 - 脚本应该以 ) 而不是 ]) 结束 缺少类的实例化 变量名和常量无法理解 缺少 querySelector 和 querySelectorAll 的帮助函数

!(function() 
  class Bo 
    constructor() 
      const $$ = selector => document.querySelector(selector),
           $$$ = selector => document.querySelectorAll(selector),
         links = $$$(".capabilities__list a"),
          list = $$(".capabilities__list");

      links.forEach(link => 
        link.addEventListener("mouseover", function() 
            const capability = link.getAttribute("data-capability");
            $$(".background__images img:nth-of-type(" + capability + ")").classList.add("active");
          ),
          link.addEventListener("mouseout", function() 
            const capability = link.getAttribute("data-capability"),
              image = $$(".background__images img:nth-of-type(" + capability + ")");
            image && image.classList.remove("active");
          ),
          link.addEventListener("click", function() 
            window.capability = this.getAttribute("data-capability");
          ),
          list.addEventListener("mouseover", function() 
            $$("#home__capabilities img.fill-background").classList.add("hidden");
          ),
          list.addEventListener("mouseout", function() 
            const image = $$("#home__capabilities img.fill-background");
            image && image.classList.remove("hidden");
          );
      );
    
  
  const list = new Bo()
)();

#home__capabilities 
  width: 100vw;
  height: 60vh;
  display: flex;
  align-items: center;


img.fill-background 
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;


img.fill-background.hidden 
  opacity: 0;


.capabilities__list 
  font-size: 50px;
  z-index: 10;


.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;

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

【讨论】：

这真是太棒了：）你这个摇滚人！谢谢！

Groeten uit R'dam btw.

Groete ùit De Haag

@Schakelen 我为你创建了 $$ 和 $$$ 并重命名了变量

在这里浏览学习曲线，并对结果感到高兴。再次感谢您的帮助！