个人中心
gpt4 book ai didi

javascript - 如何从这里摆脱 Js Undefined ？

转载 作者：行者123 更新时间：2023-12-03 02:29:48 26 4
gpt4 key购买 nike

enter image description here我的代码没问题，输出进入控制台。但在我的跨度标记结果(名字)中显示未定义。我不明白有什么问题。谁能帮我解决这个问题？我怎样才能摆脱这个问题？

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

26 4 0
文章推荐： javascript - 当我们可以使用简单的 return 语句时，为什么要使用函数表达式
文章推荐： elasticsearch - Elasticsearch 中发布，更新和更新之间的差异
文章推荐： 用于调用电话和播放音频文件的 Python API
文章推荐： javascript - 如何使用node js在前端显示modgodb中存储的图像URL路径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com