Question

有人知道为什么下面的代码不起作用吗？假设如果我点击箭头按钮网站会返回一些东西，我在 querySelectorAll 中输入了错误的代码吗？非常感谢！

<!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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <style>
        .buttons {
            font-size: 48px;
        }
    </style>
</head>
<body>
    <h1>Dance Time</h1>    
    <div class="buttons"></div>
    <i class="fas fa-arrow-up"></i>
    <i class="fas fa-arrow-down"></i>
    <i class="fas fa-arrow-left"></i>
    <i class="fas fa-arrow-right"></i>
    </div>
    <script>
        let arrows = document.querySelectorAll('.buttons .fas')
        for (const arrow of arrows) {
            arrow.addEventListener('click',function(){
                if (arrow.classList.contains('fa-arrow-up')) {  
            console.log('arrow clicked')
                }
        })
        }
    </script>
</body>
</html>

Answer 1

你在按钮 div 后面放置了错误的 div ,,, 这可能是原因......再次检查并让我知道如果某事出错

        let arrows = document.querySelectorAll('.buttons .fas')
        for (const arrow of arrows) {
            arrow.addEventListener('click',function(){
                if (arrow.classList.contains('fa-arrow-up')) {  
            console.log('arrow clicked')
                }
        })
        }

  .buttons {
            font-size: 48px;
        }

    <h1>Dance Time</h1>    
    <div class="buttons">
    <i class="fas fa-arrow-up">first</i>
    <i class="fas fa-arrow-down">second</i>
    <i class="fas fa-arrow-left">third</i>
    <i class="fas fa-arrow-right">fourth</i>
    </div>

querySelectorAll 的点击按钮问题

1 个答案: