Question

我正在使用jQuery为我的计算项目创建一个网站，我已经链接了一个外部JavaScript文件，当我调用它们时，JavaScript文件中的所有其他函数工作正常，但是当我尝试使用showNavBar时，它说它未定义但是在文件中，当我将鼠标悬停在崇高文本中时，它表示它是在JavaScript文件中定义的当我将该函数放在homepage.html文件中时，它可以正常工作，因此在调用它或函数本身时没有问题。

以下是我调用定义的homepage.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Harry's Computer Shop</title>
    <link rel="shortcut icon" href="images/icon.ico" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="javascript/functions.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <script>
        $(document).ready(function() {
            showNavBar();
            var currentpage = "homepage";
            curclass(currentpage);
            $("#showhide").click(function(){
                showhidesocial();
            });
        });
    </script>

</head>
<body>

<div class="header">
    <div>HARRY'S COMPUTER SHOP</div>
</div>

<ul id="navBar">
</ul>

<container class="feed">
<a class="twitter-timeline" data-width="250" data-height="1200" data-dnt="true" data-theme="dark" data-link-color="#E95F28" href="https://twitter.com/GHCHCS">HCS Twitter</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</container>
</html>

这里是函数在functions.js中定义的地方：

$(document).ready(function(){

    function showNavBar() {
        //Creates the navbar for each page
        var out = "";
        out += "<li><a class='menuitem' href='homepage.htm' id='homepage' title='Home'><span class='glyphicon glyphicon-home'></span>  HOME</a></li>";
        out += "<li><a class='menuitem' href='customerbuilds.html' id='customerbuilds' title='View Customer Builds'>CUSTOMER BUILDS</a></li>";
        out += "<li><a class='menuitem' href='systembuild.html' id='systembuild' title='Custom System Builder'>SYSTEM BUILDER</a></li>";
        out += "<li><a class='menuitem' href='indivpartpurchase.html' id='indivpartpurchase' title='Purchase Individual Parts'>INDIVIDUAL PART PURCHASE</a></li>";
        out += "<li><a class='menuitem' href='forums.html' id='forums' title='Visit our forums'>FORUMS</a></li>";
        out += "<li><a class='menuitem' href='javascript:void()' id='showhide' title='Show/Hide Social Media'>HIDE SOCIAL MEDIA</a></li>";
        out += "<li><a class='menuitem2' href='javascript:void()' id='signup' title='Sign Up'><span class='glyphicon glyphicon-user'></span>  SIGN UP</a></li>";
        out += "<li><a class='menuitem2' href='javascript:void()' id='login' title='Login'><span class='glyphicon glyphicon-log-in'></span>  LOGIN</a></li>";
        $("#navBar").html(out);
    }

    var hidden=false;
    function showhidesocial(){
        // Shows/hides all containers with the class 'feed'
        // Variables
        // hidden: boolean - used to check if the feeds are hidden or not
        // text: string - holds the data which replaces the current text on the button

        // Algorithm
        // if not hidden:
        //   fade out all elements with class 'feed'
        //   text <- "SHOW SOCIAL MEDIA"
        //   button text <- text
        //   hidden <- true
        // endif
        // else
        //   fade in all elements with class 'feed'
        //   text <- "HIDE SOCIAL MEDIA"
        //   button text <- text
        //   hidden <- false
        // end else

        if (hidden==false){
            $(".feed").fadeOut(500);
            var text = "SHOW SOCIAL MEDIA";
            $('#showhide')[0].innerHTML = text;
            hidden = true;
        }
        else {
            $(".feed").fadeIn(500);
            var text = "HIDE SOCIAL MEDIA";
            $('#showhide')[0].innerHTML = text;
            hidden = false;
        }
    }


    function curclass(currentpage) {
        // Changes the class of a tab to active if a user clicks on it
        // Variables
        // classes: string - contains all the elements that have the class name 'menuitem'
        // currentpage: string - contains text that says what the current page is
        // i: integer - key used in the for loop

        // Algorithm
        // classes <- get elemets with class name menuitem
        // for each class:
        //   if class id == currentpage:
        //     replace class name with active
        //   end if
        // end for

        var classes = $(".menuitem");
        for (i = 0; i < classes.length; i++) {
            if (classes[i].id == currentpage) {
                classes[i].className = classes[i].className.replace("menuitem", "active");
            }
        }
    }
});

单个函数未在外部JavaScript文件中定义

0 个答案: