Question

所以我最近一直在建立一个新的网站，并用jQuery进行了很多实验。

不幸的是，我的jquery文件实际上在网站上工作时似乎遇到了很大的问题。

这是html代码。正如你所看到的，我有CDN添加的jquery，javascript是一个完全独立的文件。我在主要功能中添加了一个警报，只是为了检查它是否正在读取我放的东西而且我被卡住了。

<html>
    <head>
        <!--Browser Data-->
        <meta charset="utf-8">
        <!--Meta Data -->
        <title>website</title>
        <meta name="description" content="The Official Page of website">
        <meta name="Keywords" content="some website stuff">
        <meta name="author" content="me">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <!-- CSS File Locations -->
        <link rel="stylesheet" href="css/main.css">

        <!-- Javascript File Locations -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script>

        <!-- Fonts used -->
        <link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
    </head>
    <body>
        <!-- A logo will go here but here is some text for now -->
        <H1 ID="Logo">website</H1>

        <!-- The menu bar -->
        <ul class="menu" ID="Menu_Bar">
            <li Class="Menu_Item" ID="Home">
                <a Class="Menu_Link" href="index.html">Home</a>
            </li>
            <li Class="Menu_Item" ID="About_Us">
                <a Class="Menu_Link" href="about.html">About Us</a>
            </li>
            <li Class="Menu_Item" ID="Events">
                <a Class="Menu_Link" href="events.html">Events</a>
            </li>
            <li Class="Menu_Item" ID="Contact">
                <a Class="Menu_Link" href="contact.html">Contact Us</a>
            </li>
        </ul>
        <!-- An image of the stuff-->
        <img ID="theGang" src="assets/thegang.png"/>
    </body>
</html>

这是JQuery。

$(document).ready(function(){
    $("button").click(function(){
        $("#theGang").fadeIn(3000);
        alert("it worked");
    });
});

我只是不确定为什么它不起作用。

顺便说一句，javascript文件位于一个名为js的子文件夹中，名为main.js，而html名为index.html

Answer 1

根据您的评论看起来您需要做的就是删除不存在的button元素的事件处理程序。这将启用fadeIn和alert。

$(document).ready(function(){
      $("#theGang").fadeIn(3000);
      //alert("it worked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- A logo will go here but here is some text for now -->
        <H1 ID="Logo">website</H1>

        <!-- The menu bar -->
        <ul class="menu" ID="Menu_Bar">
            <li Class="Menu_Item" ID="Home">
                <a Class="Menu_Link" href="index.html">Home</a>
            </li>
            <li Class="Menu_Item" ID="About_Us">
                <a Class="Menu_Link" href="about.html">About Us</a>
            </li>
            <li Class="Menu_Item" ID="Events">
                <a Class="Menu_Link" href="events.html">Events</a>
            </li>
            <li Class="Menu_Item" ID="Contact">
                <a Class="Menu_Link" href="contact.html">Contact Us</a>
            </li>
        </ul>
        <!-- An image of the stuff-->
        <img ID="theGang" src="https://image.freepik.com/free-photo/cute-cat-picture_1122-449.jpg" style="display: none;"/>

jquery文件未应用于网页

1 个答案: