javascript - JQuery.val()不起作用

我试图简单地获取一个输入的值，并将其附加到一个“zipcode”变量。然而，每当我试图控制这个值时，它就变成了空白。

$(document).ready(function(){
  var zipcode = $('.zipcode-search').val()

  $('#button').on('click', function(){
    console.log(zipcode)
  })

HTML格式

<div class="col-sm-12">
    <div class="text-center">
        <input class="text-center zipcode-search" type="text" name="zipcode-search" placeholder="Enter your city"/>
        <button id="button" class="btn btn-success">
          Submit
        </button>

我在codepen.io上做这个。我不确定这是否与此有关，但我想我可以补充一下。除了.val（）之外，还有其他方法可以获取元素的值吗？

最佳答案

.zipcode-search，在页面加载时没有值，并且变量的值在页面加载时只分配一次。
如果要在单击按钮时更新变量，则需要将对$.val的调用移动到click事件处理程序中。
下面是一个例子：

$(document).ready(function() {
    var zipcode = null;

    $('#button').on('click', function() {
        zipcode = $(".zipcode-search").val();
        console.log(zipcode);
    });
});

注意，当页面加载时，我如何给zipcode赋值null，这是因为如果没有更高级的逻辑，.zipcode-search在页面加载时有值的可能性很小。
编辑：其他答案中提供的示例，在每次触发按钮的单击事件时都重新定义了zipcode变量。这是不需要的。
每次触发click事件时声明/重新声明变量会使该变量成为click事件回调函数的独占范围，这将阻止您在该回调之外重用该变量。

关于javascript - JQuery.val()不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37244219/