javascript - 无法以正确的顺序将 JQuery 链接到 HTML-6ren

javascript - 无法以正确的顺序将 JQuery 链接到 HTML

转载作者：可可西里更新时间：2023-11-01 13:43:22

在让我的 JQuery 正确加载方面，我遇到了很多问题。我看过 youtube 视频并搜索了谷歌，但似乎没有任何效果:(

JQuery 未正确加载的最常见问题是人们在 JQuery 之前加载 js 文件，但我已经以正确的顺序加载它，但我仍然遇到问题。

以前，我只能在本地运行使用 JQuery 的功能，但现在即使这样也不起作用。

这是我的 index.html 文件:

<!DOCTYPE html>

<html>
    
    <head>  
        
            <title> Website </title>
            <link rel = "stylesheet" href="style.css" /> <!-- Link to css --> 
           
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="script.js"> </script> <!-- link to js AFTER JQuery--> 
            `
        
            <!-- Import Fonts to Use -->
            <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" />
            <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
            <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
            <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
        
           
    </head>

    <body>

            <div class="overlay-navigation">
                  <nav role="navigation">
                    <ul>
                      <li><a href="home.html" data-content="The beginning">Home</a></li>
                      <li><a href="about.html" data-content="Curious?">About</a></li>
                      <li><a href="projects.html" data-content="Showcasing my skills">Works</a></li>
                      <li><a href="resume.html" data-content="Reach out for a copy">Resume</a></li>
                      <li><a href="contact.html" data-content="Don't hesitate">Contact</a></li>
                    </ul>
                  </nav>
            </div>

            <section class="home">
                  <div class="open-overlay">
                    <span class="bar-middle"></span>
                    <span class="bar-bottom"></span>
                    <span class="bar-top"></span>
                  </div>
            </section>
    </body>


</html>

我有一个名为“style.css”的 css 文件

这是我的名为“script.js”的 js 文件

$('.open-overlay').click(function() {
  var overlay_navigation = $('.overlay-navigation'),
    nav_item_1 = $('nav li:nth-of-type(1)'),
    nav_item_2 = $('nav li:nth-of-type(2)'),
    nav_item_3 = $('nav li:nth-of-type(3)'),
    nav_item_4 = $('nav li:nth-of-type(4)'),
    nav_item_5 = $('nav li:nth-of-type(5)'),
    top_bar = $('.bar-top'),
    middle_bar = $('.bar-middle'),
    bottom_bar = $('.bar-bottom');

  overlay_navigation.toggleClass('overlay-active');
  if (overlay_navigation.hasClass('overlay-active')) {

    top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
    middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
    bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
    overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
    nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
    nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
    nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
    nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
    nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
  } else {
    top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
    middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
    bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
    overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
    nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
    nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
    nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
    nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
    nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
  }
})