如何在方法外访问 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>

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

Answer 1

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

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

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

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

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

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

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

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

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

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

您应该仔细阅读 closures，因为这就是您在这里要处理的内容。

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

How to access jquery change event value outside the method?

jquery

jquery-events