为什么会出现这两个错误?

时间:2019-05-21 12:42:57

标签: javascript jquery html twitter-bootstrap font-awesome

在发表评论之前,我很肯定我的文件位于正确的位置。

这是我的第一个错误:

我的网页上有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.wofffa-solid-900.woff2fa-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>

1 个答案:

答案 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>