修改

Question

这是我第一次尝试将所有脚本从html文件移动到外部Javascript文件，因为我认为将显示与脚本代码分开会更有条理。

原来我有

HTML

<body>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle" >Menu</a>


<script>
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>
</body>

我尝试翻译或移动到外部文件。

HTML

<body>
  <a href="#menu-toggle" class="btn btn-default" id="menu-toggle" onClick="showHideMenu()">Menu</a>

  <script src="myjsfolder/externalJavascript.js"></script>
</body>

externalJavascript

function showHideMenu(){

$("#menu-toggle").click(function (e) {
            e.preventDefault();
            $("#wrapper").toggleClass("toggled");
        });
}

我知道这可能看起来像一个愚蠢的问题，但我无法正确理解。但我知道我需要将脚本移到外面。在html文件中，一切正常。

感谢。

Answer 1

你需要

不将onclick=...添加到您的HTML
将您的Javascript包装在`$（document）.ready（function（）{//您的代码//}}中的其他文件中;

修改

正如nnnnn所指出的那样，因为你将文件包含在<body>标记内而不是<head>标记（我通常放置我的脚本），所以你真的不需要{ {1}}包装器。

＆＃13;

$(document).ready()

＆＃13;

$(document).ready(function() {
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
  });
});

＆＃13;

编辑2

使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Menu</a>  </body>语法看起来像这样。

＆＃13;

onclick

＆＃13;

//your-file.js
function menu_toggle_click(e) {

  $("#wrapper").toggleClass("toggled");
}

＆＃13;

正确地将javascript作为函数移动到外部并触发事件

1 个答案:

修改

编辑2