Question

我在让JQuery正确加载方面遇到了很多问题。我查看了youtube视频并搜索了Google，但似乎没有任何效果：（

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');
  }
})

任何帮助将不胜感激!!谢谢!!

这是它显示的内容：

Answer 1

你的js文件应该放在身体的底部。您正在引用js中尚不存在的dom元素，因为它们尚未加载到标记中。

将jquery和js引用移动到正文的底部

无法使用正确的顺序将JQuery链接到HTML

1 个答案: