在发表评论之前,我很肯定我的文件位于正确的位置。
我的网页上有Bootstrap,Font Awesome和jQuery。
我收到一条错误消息:
Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap-4.3.1.min.js:6
at bootstrap-4.3.1.min.js:6 bootstrap-4.3.1.min.js:6
at bootstrap-4.3.1.min.js:6
我知道还有其他类似问题,但是它们不能解决我的问题。
In this question,一些答案告诉我制作一个脚本标签并执行以下操作:
window.$ = window.jQuery = require('jquery'); // not sure if you need this at all
window.Bootstrap = require('bootstrap');
这对我不起作用。
如何阻止该错误继续存在?
由于某种原因,我的一个文件正在调用fa-solid-900.woff
,
fa-solid-900.woff2
和fa-solid-900.ttf
。
我在代码中的任何地方都没有调用这些文件,但是却出现错误提示
GET file:///C:/Users/temporarily-me/OneDrive/Desktop/Web/webfonts/fa-solid-900.woff2
net::ERR_FILE_NOT_FOUND
GET file:///C:/Users/temporarily-me/OneDrive/Desktop/Web/webfonts/fa-solid-900.woff
net::ERR_FILE_NOT_FOUND
GET file:///C:/Users/temporarily-me/OneDrive/Desktop/Web/webfonts/fa-solid-900.ttf
net::ERR_FILE_NOT_FOUND
我没有webfonts
文件夹,更不用说它正在调用的文件了,而且我找不到它在哪里调用它们。
如果有帮助,我正在使用Chrome,jQuery.min.js 3.4.1,Bootstrap.min.js 4.3.1,Bootstrap.min.css 4.3.1和font-awesome.min.css 5.8.2
这是我的两个错误代码:
var $fixme = $( '.fixme' );
var fixmeTop = $fixme.offset().top;
var $main = $( 'main' );
var $win = $( window );
$win.scroll( function () {
var atSticky = $win.scrollTop() >= fixmeTop;
$fixme.toggleClass( 'sticky', atSticky );
$main.css( 'padding-top', atSticky ? fixmeTop + 5 : 0 );
} );
$(function () {
$(document).scroll(function () {
var $nav = $(".fixme");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
.fixme {
width: 100%;
height: 60px;
color: red;
}
.sticky {
position: fixed;
top: 0;
left: 0;
}
.a {
height: 60px;
background-color: green;
}
a,
a:hover,
a:focus {
font-size: 16px;
outline: 0 solid transparent;
text-decoration: none;
transition-duration: 500ms;
}
ul,
ol {
margin: 0;
}
ul li,
ol li {
list-style: none;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Web Page </title>
<!-- these are just here since Stack Overflow does not have the latest libraries, so I used them ;) -->
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-------------------->
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="CSS/font-awesome-5.8.2.min.css">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap-4.3.1.min.css">
</head>
<body>
<header>
<div class="top-header-area">
<p style="float: left; font-size: 32px;">Logo Here</p>
<div class="search-login-area">
<div class="search-area">
<form action="#" method="post">
<input type="search" name="top-search" id="topSearch" placeholder="Search">
<button type="submit" class="btn">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<div class="login-area">
<a href="#">
<span>Login / Register</span>
<i class="fa fa-lock" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="fixme">
<div id="stickynav" class="stickynav">Sticky Div is very Sticky.
</div>
</div>
</header>
<main>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</main>
<script src="Javascript/Bootstrap/bootstrap-4.3.1.min.js" ></script>
<script src="Javascript/jQuery/jquery-3.4.1.min.js" ></script>
<script src="Javascript/Active.js" ></script>
</body>
</html>
答案 0 :(得分:1)
这是我的第一个错误:
更改顺序,首先加载jquery文件,然后引导文件
<script src="Javascript/jQuery/jquery-3.4.1.min.js" ></script>
<script src="Javascript/Bootstrap/bootstrap-4.3.1.min.js" ></script>