Question

我知道类似的问题有$（this）的令人困惑的性质，以前已经问过很多次了，但是我仍然无法通过阅读来弄清楚这一点。如果这真的很简单/已经在其他地方回答过，请提前道歉。

我有一个带有自动完成功能的输入表单，该表单从JSON文件获取建议。

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>HTML Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <input type="text" name="example" id="example">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="code.js"></script>
</body>

然后我有一些javascript

$(document).ready(function () {
    $("#example").autocomplete({
        source: function () {
            console.log($(this).prop("id"));
            var suggestions = [];
            $.getJSON("parameters.json", function (data) {
                $.each(data, function (key, val) {
                    if (key == $(this).prop("id")) {
                        suggestions = val;

                    }
                });
            })
            return suggestions;
        }
    });

    $("#example").keyup(function () {
        console.log($(this).prop("id"));
    })
});

console.log($(this).prop("id"));事件处理程序绑定程序中的$("#example").keyup()输出“ example”，如预期的那样。但是，自动完成窗口小部件的代码中的console.log($(this).prop("id"));输出Undefined。为什么会这样呢？如果我从两者中都删除了.prop("id")，那么它们会返回

从keyup输出顶部对象，从autocomplete底部输出对象。

有人可以在这里解释差异吗？谢谢！

Answer 1

您可以查询$(this)对象以查找所需内容。使用console.log($(this)) jQuery返回一个包含一个对象的数组。该对象包括另一个称为“元素”的对象数组，其中包含对<input>元素的引用。

即使我添加了多个$(this)[0].element[0].id元素并按类而不是ID绑定自动完成功能，我仍然使用$(this).prop("id")而不是<input>并起作用。

编辑

进一步说明我的答案-这可能比其他参考文献提供的倾斜参考和解雇更有用。以下内容将处理@Barmar描述的回调问题，并允许您访问所描述的ID。

$(document).ready(function () {
    $("#example").autocomplete({
        source: function () {
            var suggestions = [];
            var elementId = $(this)[0].element[0].id;
            $.getJSON("parameters.json", function (data) {
                $.each(data, function (key, val) {
                    console.log(elementId);
                    if (key == elementId) {
                        suggestions = val;
                    }
                });
            });
            return suggestions;
        }
    });

    $("#example").keyup(function () {
        console.log($(this).prop("id"));
    });
});

当elementId仍处于正确的上下文中时，变量$(this)捕获ID，并将其提供给$.getJSON和$.each产生的委托函数。在我的示例中，将为每个返回的键/值对将elementId写出到控制台。

为什么在这种情况下未定义$（this）.prop（“ id”）？

1 个答案: