javascript错误显示在浏览器中

Question

JavaScript 代码无法运行。您能告诉我为什么它不起作用吗？无论内容高度如何，我都想要两个大小相等的 div。我在容器内放入了两个 div，并在两个 div 内放入了一些虚拟文本。样式表也随函附上。浏览器抛出此错误。 “ Uncaught ReferenceError :$未定义”。

$(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>

Answer 1

The browser is throwing this error. "Uncaught ReferenceError: $ is not defined" .

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

要解决此问题，只需从 the jQuery website 下载 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 变量永远不会被使用。