未捕获的引用错误: 未定义 h1标头

Question

我是JQuery的新手，我正在尝试实现基本的jquery代码，但它不起作用。请帮忙。

$(document).ready(function() {
  manipulateDOM();
});
function manipulateDOM() {
  var h1Headers = $('h1');
  var h3Headers = $('h3');
}
h1Headers.text('Hello World');
h3Headers.first().css('text-decoration', 'line-through');
h3Headers.css('color', '#37887D');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My HTML code:
<h1>H1 Header</h1>
<hr />
<h3>H3 Header</h3>
<hr />
<h3>Another H3 Header</h3>

Answer 1

这不是有用的代码，但您遇到的问题与范围有关。变量是在函数manipulateDOM()内部创建的，但随后您将在函数外部访问它们。这是不允许的。您可以在函数外部创建变量，然后在函数内使用它们。

$(document).ready(function () {
    manipulateDOM();
});
var h1Headers;
var h3Headers;
function manipulateDOM() {
    h1Headers = $('h1');
    h3Headers = $('h3');
}
h1Headers.text('Hello World');
h3Headers.first().css('text-decoration', 'line-through');
h3Headers.css('color', '#37887D');

JSFiddle

Scope 是一个基本的 JavaScript 和通用编程概念，这个问题与 JQuery 的工作方式无关。

Javascript 使用局部变量和全局变量。W3学校参考

或者，您可以将变量及其用法放在 manipulateDOM() 函数中。您可以完全删除该功能并在ready()中完成所有操作，但是既然您正在学习，那有什么乐趣呢？

$(document).ready(function () {
    manipulateDOM();
});
function manipulateDOM() {
    //h1Headers and h3Headers are defined in function and disappear
    // after the function completes. The DOM is changed and those
    // changes will persist even though the variables no longer exist.
    var h1Headers = $('h1');
    var h3Headers = $('h3');
    h1Headers.text('Hello World');
    h3Headers.first().css('text-decoration', 'line-through');
    h3Headers.css('color', '#37887D');
}

Answer 2

移动manipulateDOM()函数的右括号以包含要执行的操作。

变量h1Headers和h3Headers是在该函数中创建的，并且只持续很长时间。在当前代码中，当您尝试使用它们来更改文本和 CSS 时，它们不再存在，因为这些行在任何函数之外。这就是错误消息中变量"未定义"的原因。查看JavaScript中的"变量范围"。

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
    h1Headers.text('Hello World');
    h3Headers.first().css('text-decoration', 'line-through');
    h3Headers.css('color', '#37887D');
}