Question

我第一次尝试在真实网页上使用我的jQuery课程时，发现变量guess（在此内部函数范围内）在函数完成后立即消失。

这是正常的javascript行为，我想，但是人们通常如何抓住变量以便在其他函数中使用它？我的课程从未涵盖过这一点。

我假设一旦guess被路由到#display的innerHTML，它就会坚持下去。但它甚至从那里消失了。

<!DOCTYPE html>
<html>
    <HEAD>
        <title>Game of the Century</title>
        <meta charset="UTF-8">
        <LINK href="reset.css" rel="stylesheet" type="text/css">
        <LINK href="main.css" rel="stylesheet" type="text/css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="application.js"></script>
    </HEAD>

    <body>
        <form>
            <input type='text' name = "input" id = "input"><br>
            <input type='submit' id="submit">
        </form>
        <p id = "display"></p>   
        <div>
            <img src="http://img707.imageshack.us/img707/2403/rj1a.jpg" alt = "ad">
        </div>
    </body>
</html>

...

$(document).ready(function () {

        $('#submit').click( function() { 
              var guess = $('#input').val();
              $("#display").html(guess);
         });   

});

Answer 1

这是绝对正常的，它与jQuery无关。您的guess变量在闭包，匿名函数中定义。因此，它存在于那里，并且在该范围之外无法访问。如果您想在点击处理程序之外使用guess，只需在外部定义即可。例如：

$(document).ready(function () {
    var guess;
    $('#submit').click( function() { 
        guess = $('#input').val();
        $("#display").html(guess);
    });   
    var anotherMethod = function() {
        alert(guess); // <--- it works
    }
});

另外，如果已经包含jQuery，则不需要使用document.getElementById。

编辑：我刚刚看到了HTML。代码还有另一个副作用。当您单击按钮时，您的表单实际上是在提交。尝试将type="submit"更改为"type="button"或其他一些方法以阻止表单提交。

Answer 2

就在这里我的解决方案可能更好地分割读/写任务

    $(document).ready(function () {

        getMyHtml = function() {
            return $('#input').val();
        }

        setMyHtml = function () {
            var s = getMyHtml();
            $("#display").html(s);
        }

        $('#submit').click(setMyHtml);
    });

jquery - 在输入字段上使用它 - 无法使函数变量，因此我可以使用它

2 个答案: