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

Question

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

似乎 titles 变量在 function onClick(event) 函数中是 "stuck"。我如何"get it out?"

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

这可能已经得到解答，但我不知道足够多的行话来有效地搜索答案。我还使用了这里的一些代码，因为我想接受两个字符串输入：Get values from multiple inputs jQuery

Answer 1

首先，您在第二个 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]);
});

Answer 2

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

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

所以当你定义变量时

var titles

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

如果您想检索标题，请创建一个内部包含

的函数 getTitles

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

并从您的函数中调用它。

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

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

javascript

jquery

jquery-events