提醒输入类型号码的值

Question

以下是我遇到问题的代码。在它下面，我将添加一个解释：

$(function() { 
 
\t var $input = $("#input"); 
 
\t var input = $input.val(); 
 
\t var $go = $("#go"); 
 

 
\t $go.click(function() { 
 
\t \t alert(input); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
\t <input type="number" id="input"> 
 
\t <button type="button" id="go">GO!</button> 
 
</main>

上面的代码是一个dummie例子来表示我的实际问题，不需要更多的背景。

所以我有一个input type="number" id="input"其中你输入一个数字和一个button type="button" id="go"。

以我的jQuery，我首先声明$input保持所述元件#input，然后input其保持元件#input的值，最后保持该元件#go$go。

下面，我有一个功能，说，当我点击#go，我应该能够alert(input)。

现在，这段代码并没有这样做。在我的脑海中，这是非常有意义的，但显然它不起作用。

Answer 1

这是因为您在点击函数之外声明了input，这意味着该值（仅为空字符串）在运行时设置并且不会更新。您应该在单击事件处理程序中定义input：

$(function() { 
 
    var $input = $("#input"); 
 
    var $go = $("#go"); 
 

 
    $go.click(function() { 
 
    var input = $input.val(); 
 
    alert(input); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <input type="number" id="input"> 
 
    <button type="button" id="go">GO!</button> 
 
</main>

Answer 2

首先，StackOverflow上似乎要禁止从代码片段警报起源，这将是输出他们更容易到控制台，而不是所以你可以跟踪事情。

您的代码可以简化下来，而不需要很多变量。

但是，您的主要问题是，当点击事件发生时输入值没有得到重置，但在页面加载时得到拾取，这意味着它将卡在''。

$(function() { 
 
    $("#go").click(function() { 
 
    var input = $("#input").val(); 
 
    console.log(input); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<main> 
 
    <input type="number" id="input"> 
 
    <button type="button" id="go">GO!</button> 
 
</main>