jquery - 我如何将其放入外部 javascript 文件中

我正在尝试创建一个按钮，当单击菜单栏中的 anchor 时，该按钮会使 div 出现在页面前面。问题是我的 html 文件中有 javascript，我想将它放在外部文件中，这样我就可以在不同的页面中重用它，因为当您单击 anchor 时，此表单必须出现在每个页面上。

input[type=text], input[type=password] {
    width: 100%;

    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.close {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #000;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    border: 1px solid #888;
    width: 80%;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title>Near-reality craft</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>

  <div id="hormenu">
    <a href="#" class="hormenu_item">Home</a>
    <a href="#" class="hormenu_item" id="registerButton">Registeren</a>
    <a href="#" class="hormenu_item">features</a>
    <a href="#" class="hormenu_item">Contact</a>

  </div>

  <!-- Het veld (Het registratieveld) -->
  <div id="registerModal" class="modal">
    <span onclick="document.getElementById('registerModal').style.display='none'" class="close" title="Close Modal">&times;</span>
    <form class="modal-content animate" action="/action_page.php">
      <div class="container">
        <label><b>Email</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

        <label><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <label><b>Repeat Password</b></label>
        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
        <input type="checkbox" checked="checked"> Remember me
        <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

        <div class="clearfix">
          <button type="button" onclick="document.getElementById('registerModal').style.display='none'" class="cancelbtn">Cancel</button>
          <button type="submit" class="signupbtn">Sign Up</button>
        </div>
      </div>
    </form>

  </div>

  <script>
    $("#registerButton").click(function() {
      $("#registerModal").toggle();
    })
  </script>
  
  <div id="informatie">
    <h1>Welkom!</h1>
    <p>test</p>
  </div>


  </div>

</body>

</html>

你能帮我解决这个问题吗？

最佳答案

只需将脚本代码复制粘贴到外部 js 文件中即可。

但是将代码包装在 $(document).ready(function(){..}); 内如下所示:-

$(document).ready(function(){
  $("#registerButton").click(function() {
     $("#registerModal").toggle();
  });
});

现在在您的 html 文件中只需添加此文件，如下所示:-

<script type="text/javascript" src="your external js file path"></script>

您可以在 <head> 中调用它部分或页面底部。

注意:- 确保 jQuery 库添加在此外部 js 文件之前。 否则，您将得到

$ not defined error

关于jquery - 我如何将其放入外部 javascript 文件中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45586492/

jquery - 我如何将其放入外部 javascript 文件中

上一篇：jquery - symfony FOSJsRoutingBundle 生成 url

下一篇：jquery - 隐藏和取消隐藏相关下拉菜单