我的代码没问题，输出进入控制台。但在我的跨度标记结果(名字)中显示未定义。我不明白有什么问题。谁能帮我解决这个问题？我怎样才能摆脱这个问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Baby name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="first_div" id="div_id">
<div><p> Baby Names</p></div>
<div><p> HOW UNIQUE IS YOUR CHILD NAMES IS ?</p></div>
Enter Full Name : <input type="text" id="input_id" class="input_class">
<input type="button" class="btn_class" id="btn_id" value="search">
</br>
<span id="result"> </span>
</div>
</body>
</html>
<script>
function insertWord(tree, string) {
var keys = Object.keys(tree),
result = keys.some(function (k) {
var i = 0;
if (string.substr(0, k.length) === k) {
string.slice(k.length);
return true;
}
while (k[i] == string[i] && i < k.length) {
i++;
}
if (i) {
var id = k.slice(0, i);
tree[id] = {
[k.slice(i)]: tree[k], [string.slice(i)]: 0
}
;
delete tree[k];
return true;
}
}
);
if (!result) {
tree[string] = 0;
}
}
$(document).ready(function () {
localStorage.clear();
$('#input_id').keyup(function (e) {
fsname = $('#input_id').val();
var data = fsname.trim();
var msg = $('#result');
msg.empty();
var localdata = localStorage.getItem(data);
if (data) {
if (localdata == null) {
$.ajax({
url: "search.php",
method: "post",
data: {
input: data
},
dataType: "",
success: function (name) {
var getdata = JSON.parse(name);
var tree = {};
getdata.forEach(insertWord.bind(null, tree));
localStorage.setItem(data, JSON.stringify(tree));
console.log(JSON.parse(localStorage.getItem(data)));
console.log(getdata);
var s = getdata.length;
for (var j = 0; j < s; j++) {
if (getdata[j].surname) {
var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
msg.append(show);
} else {
var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
msg.append(show1);
}
}
}
});
} else {
var getdata = JSON.parse(localdata);
var s = getdata.length;
for (var j = 0; j < s; j++) {
if (getdata[j].surname) {
var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
msg.append(show);
} else {
var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
msg.append(show1);
}
}
}
}
})
});
</script>
我想在这里输入我的名字。但它显示未定义。我怎么解决这个问题？在控制台中我的输出非常好。和保存在本地存储中的数据。
最佳答案
您的代码无效，附加多个具有相同 id 的元素 var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; msg.append(show);
然而msg是 id 为 result 的元素;
- 请注意，跨度包含 block 元素(例如 div)也是无效的。
- 为什么多次包含 jQuery？
- 隐含的全局变量，
-
</br>无效， -
fsname是全局的(未定义) - 缺少分号，
- 您确定要使用键盘吗？在
$('#input_id').keyup(function(e) {在没有节流的情况下在每个按键上执行ajax？如果我按住“a”键会怎样？我收到多个“aaaaa”也许使用“更改”事件？ - localStorage.clear();在文档就绪事件处理程序中，表明您可能希望改用 sessionStorage。
-
localStorage.setItem(data, JSON.stringify(tree));令人费解的是通常它看起来像localStorage.setItem("mytree", JSON.stringify(tree));或类似的然后使用localStorage.getItem("mytree");访问它 -
fsname = $('#input_id').val();您已经在事件处理程序中，因此使用fsname = $(this).val(); -
$(document).ready(function () {更好写为$(function () {作为推荐方法https://api.jquery.com/ready/ - 重写你的
var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';类似var show = '<span class="result">' + getdata[j].firstname + " " + (!!getdata[j].surname && !!getdata[j].surname)? getdata[j].surname :"" + '</span>';
即取这组线
if (getdata[j].surname) {
var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>';
msg.append(show);
} else {
var show1 = '<div id="result">' + getdata[j].firstname + '</div>';
msg.append(show1);
}
重写为这两行
var showName = getdata[j].firstname + " " + (!!getdata[j] && !!getdata[j].surname)? getdata[j].surname :"";
msg.append('<span class="result">' + showName + '</span>');
当你这样做的时候，让你的代码更加干燥。
将其放在函数的最后并调用它，而不是有条件地将其放入两次。
如果您想在其中使用 block (div)，请将跨度(结果)设为 DIV。
关于javascript - 如何从这里摆脱 Js Undefined ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48779723/