如何在方法之外访问jquery更改事件值?

Question

我有一个输入文本字段：

<input type="text" id="from_input" class="form-control" placeholder="FROM">

我想在文本更改时获取文本的值。这是我的jquery代码：

<script>
var fromValue;
$(document).ready(function(){
$("#from_input").change(function() {
fromValue = $(this).val();
});
console.log(fromValue);
});
</script>

我从未定义的值变量中得到。我需要获取文本字段值，以便在整个脚本中进一步计算。我怎样才能做到这一点？

Answer 1

在触发更改事件之前记录fromValue变量。

您的代码需要更新以记录闭包中的变量：

<script>
var fromValue;
$(document).ready(function(){
$("#from_input").change(function() {
fromValue = $(this).val();
console.log(fromValue);
});
});
</script>

如果尝试在此内部函数之外访问 fromValue，它将是未定义的。只有在内部函数中(更准确地说，在调用内部函数之后(它才会有值。

如果你想使用这个值，你需要从函数内部传递它，例如

$("#from_input").change(function() {
do_something($(this).val());
});

其中do_something在代码中的其他位置定义，并执行您尝试执行的进一步计算。

您应该阅读闭包，因为这就是您在这里处理的内容。

Answer 2

一个例子：

$(function() {
$('#itext').keyup(function() {
var text = $(this).val();
$('#result').text('Your text: ' + text);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="itext">
<br><label id="result">Your text: </label>

Answer 3

您可以使用事件参数。该事件包含目标元素。我注意到你console.log在回调函数之外。您的代码可能已经可以工作，但您只是看不到它。

<script>
var fromValue;
$(document).ready(function(){
$("#from_input").change(function(event) {
fromValue = event.target.value;
console.log(fromValue);
});
});
</script>