gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:27:42 28 4
gpt4 key购买 nike

似乎在任何地方都找不到太多关于此问题的帮助,所以我想我会在这里尝试。

我正在尝试制作一个简单的 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>

最佳答案

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>

关于javascript - 影响 JavaScript for 循环中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60697657/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com