Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

所以我在其中输入了一个input type="number" id="input"和一个button type="button" id="go"。

在我的jQuery中，我首先声明$input包含元素#input，然后input保存元素#input的值，最后$go }保存元素#go。

下面我有一个功能，即当我点击#go时，我应该可以alert(input)。

现在，此代码不会这样做。在我的脑海中这是完全合理的，但显然它不起作用。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，StackOverflow似乎阻止了代码片段中的警报来源，将它们输出到控制台会更容易，因此您可以跟踪事物。

您的代码可以简化，无需多个变量。

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

＆＃13;

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

＆＃13;

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

＆＃13;

警告输入类型编号的值

2 个答案: