我使用JQuery使用变量adj
,它包含几个字符串,但只使用我选择的变量内部的字符串。我想使用这个变量使用.append()
在objective-container
div元素(ID)内创建文本。
我不知道出了什么问题,但是有一个错误信息我不明白。
错误信息:
ReferenceError: Can't find variable: $
message: "Can't find variable: $"
line: 1
column: 2
sourceURL: "file:///var/mobile/Containers/Data/Application/1343EDD2-1DC1-4FCA-A570-8272D543005C/Documents/files/clicker/objectives/objScript.js"
stack: "global code@file:///var/mobile/Containers/Data/Application/1343EDD2-1DC1-4FCA-A570-8272D543005C/Documents/files/clicker/objectives/objScript.js:1:2"
JS/Jquery:
$(document).ready(function() {
let obj = ["get points: 100",""];
let currentObj = obj[0];
let objective = "<div class="objective-text"><p>" + currentObj + "</p></div>";
// default
$("#objective-container").append(objective);
});
Html:
<div id="objective-container" class="objectiveContainer">
<!—- objectives go here -—>
</div>
</body>
</html>
首先,这个错误告诉我们,您想要的HTML没有正确呈现,因为它找不到$
,它被解释为一个属性。为了使用它作为jQuery符号,你必须通过script
标签包含它,否则jQuery方法将无法运行。
所以一定要把你想要的版本放在你的html head标签中:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
改进:使用模板字符串将currentObj
直接插入objective
现在下面的代码可以正常工作了
$(document).ready(function() {
let obj = ["get points: 100",""];
let currentObj = obj[0];
let objective = `<div class='objective-text'><p>${currentObj}</p></div>`;
// default
$("#objective-container").append(objective);
});
<!DOCTYPE html>
<html>
<head>
<!-- meta tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="objective-container" class="objectiveContainer">
<!—- objectives go here -—>
</div>
</body>
</html>
代码对我来说很好,看起来它只是不识别$变量,这只是一个指向jQuery的指针。确保在HTML页面中包含了jQuery库,如下所示。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
</head>