如何使用.classList.add（'class'）在具有多个相同class名称的元素与javaScript中的其他元素添加样式
[英]How to add style on element which have multiple same class name with other elements in javaScript using .classList.add(‘class’)
问题描述
I have multiple elements which have same class name, so I'm trying to get that class and add to it styles using JavaScript but it's not working as expected. 
I have multiple elements which have same class name, so I'm trying to get that class and add to it styles using JavaScript but it's not working as expected. I want that each elements I hover over will get the style a settled in css, But not all elements.我希望我 hover 的每个元素都将获得 css 中的样式，但不是所有元素。
This I what I tried:这是我尝试过的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(233, 232, 255);
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.card {
width: 300px;
height: 300px;
}
/* The style i want on each card when i hover over*/
.transparent {
opacity: 0.5;
}
/*---------------*/
.card-1 {
background-color: rgb(144, 140, 223);
}
.card-2 {
background-color: rgb(133, 207, 163);
}
.card-3 {
background-color: rgb(241, 157, 234);
}
</style>
</head>
<body>
<div class="container">
<div class="card card-1"></div>
<div class="card card-2"></div>
<div class="card card-3"></div>
</div>
<script>
const makeCardTransparent = (cardClassName) => {
const card = document.getElementsByClassName(cardClassName)
if(card){
for(var i = 0; i < card.length; i++){
card[i].addEventListener('mouseover', () => {
card[i].classList.add('transparent');
})
}
}
}
makeCardTransparent('card')
</script>
</body>
</html>
But this is the error I got in javaScript console:但这是我在 javaScript 控制台中遇到的错误：
TypeError: undefined is not an object (evaluating 'card[i].classList')
Can you help me how I can do it, Thank You.你能帮我怎么做吗，谢谢。
EDIT The code in JavaScript is written like this one:编辑JavaScript 中的代码是这样写的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: rgb(233, 232, 255);
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.sub-container {
background-color: rgb(61, 60, 94);
padding: 1em;
border-right: 2px solid rgb(233, 232, 255);
}
.card {
width: 300px;
height: 300px;
}
/* The style i want on each card when i hover over*/
.transparent {
opacity: 0.5;
}
/*----------------------------------------------*/
.card-1 {
background-color: rgb(144, 140, 223);
}
.card-2 {
background-color: rgb(133, 207, 163);
}
.card-3 {
background-color: rgb(241, 157, 234);
}
</style>
</head>
<body>
<div class="container">
<div class="sub-container">
<div class="card card-1"></div>
</div>
<div class="sub-container">
<div class="card card-2"></div>
</div>
<div class="sub-container">
<div class="card card-3"></div>
</div>
</div>
<script>
const makeCardTransparent = (cardClassName, subContainerClassName) => {
const card = document.getElementsByClassName(cardClassName)
const subContainer = document.getElementsByClassName(subContainerClassName)
if(card && subContainer){
for(var i = 0; i < card.length; i++){
subContainer[i].addEventListener('mouseover', () => {
card.classList.add('transparent');
})
}
}
}
makeCardTransparent('card')
</script>
</body>
</html>
2 个解决方案
解决方案1
1 2021-06-05 07:53:42
The listener make it lose the scope of the initial loop, you must check for the target on that event侦听器使其失去初始循环的 scope，您必须检查该事件的目标
if(card){
for(var i = 0; i < card.length; i++){
card[i].addEventListener('mouseover', (evt) => {
evt.target.classList.add('transparent');
})
}
}
Also, I suggest you use @john's method as it does exactly what you are looking for in a simpler way另外，我建议您使用@john 的方法，因为它以更简单的方式完全符合您的要求
解决方案2
0 2021-06-05 07:51:37
You can use CSS to do this no need for JS.您可以使用 CSS 来执行此操作，而无需 JS。
There is a CSS pseudo-class :hover which applies CSS on an element when hovered over.有一个CSS 伪类:hover将 CSS 悬停在元素上。 In the provided solution, the opacity reduces in 0.5s with ease.在提供的解决方案中，不透明度在 0.5 秒内轻松降低。 If you don't want the animation, you can simply remove the transition property.如果您不想要 animation，您可以简单地删除transition属性。
.card {
width: 300px;
height: 300px;
transition: opacity 0.5s ease;
}
.card:hover {
opacity: 0.5;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.