javascript 两步点击过程中有一步失败

30byixjq 于 2023-03-11 发布在 Java

关注(0)|答案(2)|浏览(112)

下面的代码用于执行以下两次单击过程：
1.首先点击.imagenes使不透明下拉，和.标志可见.
1.第二次点击.imagenes返回其不透明度为1和.logo隐藏一次。
相反，它经历了两次点击循环，但.logo没有显示。你能找出原因吗？
'

const imagenes = document.querySelectorAll('.imagenes');
const logos = document.querySelectorAll('.logo');

imagenes.forEach((imagen, index) => {
  let count = 0;
  imagen.addEventListener('click', () => {
    if (count % 2 == 0) {
      imagen.style.opacity = 0.1;
      logos[index].style.opacity = 1;
    } else {
      imagen.style.opacity = 1;
      logos[index].style.opacity = 0;
    }
    count++;
  });
});

html {
      box-sizing: border-box;
      font-size: 16px;
    }
    
    body {
      max-width: 1500px;
      margin: 0 auto;
    }

    .gridA {
      display: grid;
      width: 50%;
      height: auto;
      grid-gap: .5rem;
      grid-auto-rows: minmax(auto, min-content);
      grid-template-columns: 1fr;
      margin-right: .25rem;
      overflow: hidden;
    }

    .gridB {
      display: grid;
      width: 50%;
      height: auto;
      grid-gap: .5rem;
      grid-auto-rows: minmax(auto, min-content);
      grid-template-columns: 1fr;
      margin-left: .25rem;
      overflow: hidden;
    }

    img {
        width: 100%;
        height: auto; /*img use its full width leaving empty height space*/
        object-fit: cover;
        display: block; /*fill empty space remaining after adding img*/
        max-height: 100%;
        overflow: hidden;
    }
    
    #A, #B {
      position: relative;
    }

    .logo {
      position: absolute;
      visibility: hidden;
      top:0;
    }

    .youtube-link {
        position: absolute;
        top: 80%;
        left: 39%;
        width: 15%;
        
    }
    
    .video-link {
        position: absolute;
        top:100%;
        width: 10%;
        left: 44%;
    }
    
    .youtube-link2 {
        position: absolute;
        top: 75%;
        left: 42%;
        width: 15%;
    } 
    
    .youtube-link2:hover {
        opacity: .6;
    }
    
    .video-link:hover {
        opacity: .6;
    } 
    
    .youtube-link:hover {
        opacity: .6;
    }

<<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="gridA">

<div id ="A" class="box">
  
  <div class="imagenes">
    <img src="spotify-still.jpg">
  </div>
  
  <div class="logo">
    <img id="Alog" src="Spotify Logo (PNG720p) - Vector69Com.png">
      <a>
        <a class="youtube-link2" target="_blank" href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
          <img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn">
        </a>
      </a>
  </div>
</div>

<div ID ="B" class="box">
  
  <div class="imagenes">
    <img src="audi-q3-1-by-marc-trautmann 2.jpg">
  </div>
  
  <div class="logo">
    <img id="Blog" src="Audi_logo_PNG3.png">
  </div>
</div>

</div>

<div class="gridB">
</div>

<script src="JS.js"></script> 
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/75685167/two-step-click-process-fails-one-step

2条答案

按热度按时间

gpnt7bae1#

你只改变不透明度的一种方式，但你需要改变它回来的第二次点击。
让我们通过添加2个CSS类来简化此操作：hide和show，它们具有opacity、0或1。
然后可以循环遍历所有box：

[ ...document.querySelectorAll('.box') ].forEach(box => {

把图片和标志放进盒子里：

let boxImagenes = box.querySelector('.imagenes');
let boxLogo = box.querySelector('.logo');

在这里，我们可以添加一个EventListener，它将show类与hide进行replace()，对于图像，反之亦然。

boxImagenes.addEventListener("click", () => {
        boxLogo.classList.replace('hide', 'show');
        boxImagenes.classList.replace('show', 'hide');
    });

然后为徽标添加另一个EventListener，它将恢复第一次单击时的操作

注意：删除了链接+添加了占位符图像以获得更好的演示效果

一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-03-11

xdnvmnnf2#

与imagenes不同的是，在logo上，您使用的是包含空格的 pictures。
您可以删除这些空格，也可以使用 * 字符 * 替换空格，这些字符通常是加号（+）或%20。

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 两步点击过程中有一步失败

2条答案

相关问题

热门标签

最新问答