Question

我试图简单地获取输入的值，并将其附加到'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（）之外还有其他方法来获取元素的值吗？

Answer 1

我假设您想在每次点击按钮时更新zipcode。您应该将该逻辑移到事件处理程序内部。

$(document).ready(function(){

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

Answer 2

.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事件的回调函数范围，这将阻止您在该回调之外重用该变量。

Answer 3

你应该在onClick函数中获取值：

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

JQuery.val（）不起作用

3 个答案: