Question

如何使用 .classList.add(‘class’) 在 javaScript 中为与其他元素具有多个相同类名的元素添加样式

2021-06-05

917

javascript html css events

我有多个具有相同类名的元素，因此我尝试使用 JavaScript 获取该类并为其添加样式，但效果并不理想。我希望我悬停的每个元素都能获得 css 中固定的样式，但并非所有元素都是如此。

这是我尝试过的：

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

但这是我在 javaScript 控制台中收到的错误：

TypeError: undefined is not an object (evaluating 'card[i].classList')

您能帮我解决吗，谢谢。

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

Answer 1

侦听器使其失去初始循环的范围，您必须检查该事件的目标

if(card){
            for(var i = 0; i < card.length; i++){
                card[i].addEventListener('mouseover', (evt) => {
                    evt.target.classList.add('transparent');
                })
            }
        }

此外， 我建议您使用@john的方法 ，因为它以更简单的方式完成了您正在寻找的工作

Answer 2

您可以使用 CSS 来执行此操作，无需 JS 😃。

有一个 CSS 伪类 :hover ，当鼠标悬停在元素上时，它会应用 CSS。在提供的解决方案中，不透明度在 0.5 秒内轻松降低。如果您不想要动画，只需删除 transition 属性即可。

.card {
   width: 300px;
   height: 300px;
   transition: opacity 0.5s ease;
}

.card:hover {
   opacity: 0.5;
}