Question

我的代码没问题，输出进入控制台。但在我的span标记结果（firstname）中显示undefined。我无法理解问题所在。任何人都可以帮我解决这个问题吗？我怎么能摆脱这个问题？

<!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>

我想要我的名字。但它显示未定义。我怎么解决这个问题？在控制台中，我的输出非常好。和数据保存在localstorage中。

Answer 1

您的代码无效，附加多个具有相同ID var show = '<div id="result">' + getdata[j].firstname + " " + getdata[j].surname + '</div>'; msg.append(show);

的元素

然而，msg是ID为result;

的元素

请注意，如果某个span包含一个块元素（如div。
为什么要多次包含jQuery？
隐含的全局变量，
</br>无效，
fsname是全局的（未定义）
缺少分号，
你确定要关键吗？在$('#input_id').keyup(function(e) {在没有油门的每个keyup上做ajax？如果我按下＆＃34; a＆＃34;键并按住它？我得到了多个＆＃34; aaaaa＆＃34;或许可以使用“改变”。事件？
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>');

当你在这里时，让你的代码更干。

将最后一个放在一个函数中并调用它而不是有条件地将它放入两次。

如果要在其中使用块（div），请将span（result）设为DIV。

如何从这里摆脱Js Undefined？

1 个答案: