我正在学习如何在表单中创建动态更新评论的教程。我正在遵循的指南不断出现错误，而我最近发现的那个不让我修复它。它告诉我需要将“var”声明移动到函数的顶部。也没有'$'的定义
感谢任何帮助!
这是我的 JavaSript
var comment = [
{"name": "name1", "date": "00-00-0000", "body": "comment here1"},
{"name": "name2", "date": "00-00-0000", "body": "comment here2"},
{"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
for (var i=0;i<comment.length;i++){
var html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
$('#container').append(html);
}这是我的 HTML
<!DOCTYPE html>
<html>
<head>
<title> Reviews</title>
<link href="css/Review.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class='form'>
<h3>Please write a review about your stay</h3>
Name: <input type="text" id="name"/> <br> <br>
Date: <input type="date" id="date"/> <br> <br>
Comment: <textarea rows="7" col="30" id="bodyText"></textarea><br>
<input type="button" id="addComment" value="Submit">
</div>
<h2>Comments</h2>
<div id='container'>
</div>
<a href="{{ url_for('Index.html', id='content') }}">Go to Homepage</a>
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.7.0/d3.min.js"></script>
<script src="Review.jquery.js" type="text/javascript"></script>
</body>
</html>最佳答案
linter 告诉您应该在 解释器 看到变量被声明的同一点声明 i 和 comment，这将位于最内层函数的顶部，或者如果您已经在顶层，则位于顶层的最顶部。例如，对于您的代码:
var i;
var comment;
var html;
comment = [
{"name": "name1", "date": "00-00-0000", "body": "comment here1"},
{"name": "name2", "date": "00-00-0000", "body": "comment here2"},
{"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
for (i=0;i<comment.length;i++){
html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+comment[i].name+"</span><div class='date'>"+comment[i].date+"</div><p>"+comment[i].body+"</p></div><div class='clear'></div></div>"
$('#container').append(html);
}
如果不这样做，您可能会因为 var 不直观的提升问题而感到困惑 - 这就是 linting 规则的用途。 (这不是 Javascript 解释器错误，它只是您的 linter 抛出的错误。)
也就是说，您可以考虑改用现代语法，使用 const 和 let，不提升，您可以使用数组方法而不是 for 循环以获得更多功能和简洁的代码，如果你愿意的话:
const comment = [
{"name": "name1", "date": "00-00-0000", "body": "comment here1"},
{"name": "name2", "date": "00-00-0000", "body": "comment here2"},
{"name": "name3", "date": "00-00-0000", "body": "comment here3"}
];
comment.forEach(({ name, date, body }) => {
const html = "<div class='commentBox'><div class='leftPanelImg'><img src='images/Reviews/Comment%20pic.jpg'></div><div class='rightPanel'><span>"+name+"</span><div class='date'>"+.date+"</div><p>"+body+"</p></div><div class='clear'></div></div>"
$('#container').append(html);
});
您也可以考虑使用现代 linter，例如 ESLint。 JSLint 相当古老，并且不理解现代 JS 允许我们使用的许多漂亮的语法糖。
关于javascript - 将 'var' 声明移至函数顶部 - Javascript 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53663967/