jQuery

Question

我正在尝试，在我自己的 IDE 中，实现一个正在使用的 animate.css 的例子。我找到了示例 here。不同之处在于该示例使用香草 JavaScript，而我试图将其转换为 jQuery.

我有一个带有 onclick 的按钮，它应该调用函数 toggleMenu()，但该函数不起作用。控制台日志显示该函数未定义，而我的脚本文件显示该函数已声明但其值从未被读取。可能有一个简单的解释，但由于某种原因我看不到问题。

代码如下：

HTML

<!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>Fade-in menu</title>
    <script src="https://kit.fontawesome.com/f2cc866093.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="menu">
        <ul>
            <li>Posts</li>
            <li>Add new post</li>
            <li>Comments</li>
            <li>Images</li>
            <li>Videos</li>
            <li>Users</li>
        </ul>
    </div>
    <button class="toggle-menu" onclick="toggleMenu()">
        <i class="fas fa-bars"></i>
    </button> 
</body>
</html>

jQuery:

$(function() {
    var isOpen = false;

    function toggleMenu() {
        const menuElement = $('.menu');
        const toggleIcon = $('.fas');

        if (!isOpen) {
            menuElement.addClass('animate__animated', 'animate__fadeInLeft', 'open');
            toggleIcon.removeClass('fa-bars');
            toggleIcon.addClass('fa-times');
            isOpen = true;
        } else {
            menuElement.removeClass('animate__fadeInLeft');
            menuElement.addClass('animate__animated', 'animate__fadeOutLeft');
            toggleIcon.removeClass('fa-times');
            toggleIcon.addClass('fa-bars');
            isOpen = false;
        }

        function handleAnimationEnd() {
            menuElement.removeClass('animate__animated', 'animate__fadeInLeft', 'animate__fadeOutLeft');
            if (!isOpen) {
                menuElement.removeClass('open');
            }
            menuElement.off('animationend');
        }
        menuElement.on('animationend', function() {
            handleAnimationEnd();
        });
    }
});

我认为 CSS 不相关，所以我现在不会 post，但如果你们认为它有价值，我会添加它。

Answer 1

Do not use inline handlers.。他们需要全球污染，有一个疯狂的范围链，还有一系列其他问题。在这些问题中，其他 JavaScript 无法看到正在调用该函数。

即使没有 linter 警告，您当前的代码也不会工作，因为 toggleMenu 是在函数内部声明的，因此对内联处理程序不可见。

使用 JavaScript 附加侦听器：

<button class="toggle-menu">

并改变

$(function() {
    var isOpen = false;

    function toggleMenu() {
        // ...

至

$(function() {
    var isOpen = false;
    $('.toggle-menu').on('click', toggleMenu);
    function toggleMenu() {
        // ...

jQuery - 已声明就绪函数内的函数但从未读取值

jQuery - function inside ready function is declared but value is never read

onclick