JavaScript错误显示在浏览器中

javascript error is shown in the browser

本文关键字:浏览器 显示 错误 JavaScript      更新时间:2023-09-26

javascript 代码不起作用。你能告诉我为什么它不起作用吗?无论内容高度如何,我都想要两个大小相等的div。我在一个容器里拿了两个div,并在两个div里面放了一些虚拟文本。浏览器引发此错误。"未捕获的引用错误:未定义 $"。

$(document).ready(function() {
         var leftHeight = $('#left-block').height();
         var rightHeight = $('#right-block').height();
            
         if (leftHeight > rightHeight) {
            rightHeight = leftHeight;
         } else {
            leftHeight = rightHeight;
         }
           
         $('#left-block').css('height','rightHeight');
         $('#right-block').css('height','rightHeight');
     });
* {
			-webkit-box-sizing:border-box;
			   -moz-box-sizing:border-box;
			        box-sizing:border-box;
		}
       .container:before,
       .container:after {
	       	 content: "";
	       	 display: table;
       }
       .left-block,
       .right-block {
	       	float: left;
	       	padding: 20px;
	       	width: 50%;
       }
       .left-block {
       		background: #e4e4e4;
       }
       .right-block {
       		background: whitesmoke;
       }
<div class="container">
		<div id="left-block" class="left-block">
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
		</div>
		<div id="right-block" class="right-block">
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
			<p>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text</p>
		</div>
	</div>

浏览器引发此错误。"未捕获的引用错误:未定义 $"。

这意味着未定义$。 在这种情况下,$指的是jQuery。您正在尝试使用 jQuery 库中的功能,但实际上您根本没有将其包含在您的文档中。

要解决此问题,只需从jQuery网站下载jQuery,并使用以下命令将其包含在HTML文件中:

<script src="path/to/jquery/jquery.min.js"></script>

(将path/to/jquery更改为相对于将 jQuery 下载到的 HTML 文档的文件夹路径,并将jquery.min.js更改为下载版本的确切文件名)。


此外,您不是将高度设置为变量中包含的值,而是将它们设置为字符串值。改变:

$('#left-block').css('height','rightHeight');
$('#right-block').css('height','rightHeight');

自:

$('#left-block').css('height', rightHeight);
$('#right-block').css('height', rightHeight);

请注意,这样一来,您的leftHeight变量永远不会被使用。

你需要添加对jQuery的引用。例如:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>

或者你可以通过首先从jQuery网站下载它来托管它与你的网站。