时间戳

首页 > 解决方案 > 影响 JavaScript for 循环中的对象

javascript - 影响 JavaScript for 循环中的对象

问题描述

似乎在任何地方都找不到太多帮助，所以我想我会在这里尝试。

我正在尝试制作一个简单的 for 循环，当我将鼠标悬停在 html 卡片上时，它会隐藏卡片中的一些文本。卡片有一个简单的名字和姓氏，我只想隐藏姓氏。我可以通过在 for 循环中使用“this”对象使整张卡片消失，但我不明白如何让文本消失。任何帮助将不胜感激，因为我仍在学习很多关于 JS 的知识。

谢谢！

let card = document.querySelectorAll(".card");

for (i = 0; i < card.length; i++) {
  card[i].addEventListener("mouseover", function() {
    this.classList.toggle("hide");
  });
}

for (i = 0; i < card.length; i++) {
  card[i].addEventListener("mouseout", function() {
    this.classList.toggle("hide");
  });
}
body {
  margin: 0;
}

.card {
  background-color: grey;
  border-radius: 4px;
  width: 100px;
  height: 100px;
  border: 1px black solid;
  display: inline-block;
  margin: 10px;
}

.hide {
  visibility: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="card.css">
  <title>test</title>
</head>

<body>
  <div class="card">
    <span class="first">first name</span>
    <span class="last">last name</span>
  </div>
  <div class="card">
    <span class="first">first name</span>
    <span class="last">last name</span>
  </div>

  <script type="text/javascript" src="card.js"></script>
</body>

</html>

标签： javascripthtml

解决方案

this将代表您找到的整张卡片。从那里，您可以使用.querySelector()定位卡中的姓氏元素并对其进行操作。

let card = document.querySelectorAll(".card");

for (i = 0; i < card.length; i++) {
    card[i].addEventListener("mouseover", function() {
        this.querySelector(".last").classList.toggle("hide");
    });
}

for (i = 0; i < card.length; i++) {
    card[i].addEventListener("mouseout", function() {
        this.querySelector(".last").classList.toggle("hide");
    });
}
body {
    margin: 0;
}

.card {
    background-color: grey;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin: 10px;
}

.hide {
    visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="card.css">
    <title>test</title>
</head>
<body>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>

    <script type="text/javascript" src="card.js"></script>
</body>
</html>

但是这段代码可以大大简化，因为它可以只用 CSS 而不用 JavaScript 来完成：

body {
    margin: 0;
}

.card {
    background-color: grey;
    border-radius: 4px;
    width: 100px;
    height: 100px;
    border: 1px black solid;
    display: inline-block;
    margin: 10px;
}

/* When a card is hovered, its "last" child element hidden */
.card:hover > .last {
    visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="card.css">
    <title>test</title>
</head>
<body>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>
    <div class="card">
        <span class="first">first name</span>
        <span class="last">last name</span>
    </div>

    <script type="text/javascript" src="card.js"></script>
</body>
</html>

推荐阅读