javascript - jQuery .val() 没有获得值(value)

Question

let data = $(".language").attr('value');
let data2 = $('.language').val();
let data3 = $('.language').value;
let data4 = $(".language").attr('class');

$("button#test").click(function() {
  console.log(data);
  console.log(data2);
  console.log(data3)
  console.log(data4)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <p class="label">Language</p>
  <input type="text" class="language" name="language" placeholder="">
</div> 
<div class="button-wrapper text-center">
  <button type="button" class="button next" id="test" >Go to step 2</button>
</div>

我正在使用 jQuery 处理这个简单的项目，当调用 val() 函数或调用 attr('value') 时，它会返回未定义的结果。但是当使用其他属性调用 attr() 函数时，它工作正常。

请问我该怎么办

Answer 1

要获得该值，您应该像这样在点击事件内部定义那些data变量:

 // outside here is the <input>'s initial value (empty)
console.log('I am the initial empty value: ' + $('.language').val());
$("button#test").click(function() {
    // inside here is the <input>'s value at the time the button is clicked (not empty)
    var data = $('.language').val();
    console.log('I am the current value: ' + data);
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
   <p class="label">Language</p>
   <input type="text" class="language" name="language" placeholder="">
</div> 
<div class="button-wrapper text-center">
    <button type="button" class="button next" id="test" >Go to step 2</button>
</div>