如何显示从用户输入获得的 jquery 变量

How do I display a jquery variable obtained from user input?

本文关键字：输入 变量 jquery 用户 何显示 显示      更新时间：2023-09-26

我希望能够在表单中输入一些文本后单击submit按钮，然后单击results按钮以显示我刚刚输入的内容。

似乎titles变量"卡"在function onClick(event)函数中。我如何"把它拿出来"？

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $('#submit').click(onClick);
        });
        function onClick(event) {
            var titles = $('input[name^=titles]').map(function(idx, elem) {
                return $(elem).val();
            }).get();
            window.alert(titles); //it displays the titles here
        }
        $("#result").click(function() {
            window.alert('x');
            window.alert(titles); //but not here
            $("p").text(titles[0]);
        });
    });
</script>
    <p>display results here</p>
    <input name="titles[]">
    <input name="titles[]">
    ​<button id="submit">submit</button>
    <button id="results">results</button>
</body>

这可能已经得到了回答，但我不知道足够的行话来有效地搜索答案。我也使用了这里的一些代码，因为我想接受两个字符串输入： 从多个输入中获取值 jQuery

首先，您在第二个click事件的选择器中有一个拼写错误。它应该是#results的，而不是#result

对于问题的核心，titles变量在第二个click事件中超出了范围。

您可以通过在任一函数外部声明它来解决此问题。这很好，让你在任何一个中引用它。

var titles = [];
function onClick(event) {
  titles = $('input[name^=titles]').map(function(idx, elem) {
    return $(elem).val();
  }).get();
  window.alert(titles);
}
$("#results").click(function() {
  window.alert(titles);
  $("p").text(titles[0]);
});
嗨奥斯

汀，当你点击提交时，jquery 调用你的函数在点击但是此功能与您在此处注册的功能无关

$("#result").click(function() { // resultCallback

所以当你定义变量时 

var titles

这个变量，就像你说的，绑定（作用域）到函数onClick，你不能从resultCallback访问它。另外，它是完全异步的。单击结果按钮（即调用resultCallback）不是单击提交按钮（即调用onClick），因此不会加载变量标题。

如果要检索标题，请创建一个函数 getTitle 该函数，该函数内部包含

return $('input[name^=titles]').map(function(idx, elem) {
    return $(elem).val();
  }).get();

并从您的函数中调用它。

相关文章：