jQuery .val（）没有得到价值

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'）时，它返回undefined。 但是当使用其他属性调用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> 

Answer 2

为什么.attr("value")未定义？

当你执行.attr("value") ， <input>在dom中没有value属性，如果它已经存在，那么它将获取它的值。

为什么val()没有返回正确的值？

单击按钮后，您没有再次检查值，因此它显示了在页面加载期间最初设置的值。 要从val()获取更新的值，您需要在单击时再次选择dom并提取其值。 例如。

$("button#test").click(function() {
console.log($('.language').val()); // New value from input
}

请运行以下代码段来检查差异。 希望这会让事情更加清晰。

一些更多的测试场景

  // These are already initialized when the JS load for the first time let data = $(".language").attr('value'); let dataType2 = $(".language-no-value-attr").attr('value'); let data2 = $('.language').val(); let data3 = $('.language').value; //undefined as $('.language') returns an array of dom elements let data3_1 = $('.language')[0].value; // you need to loop and chose the values based on matched index let data4 = $(".language").attr('class'); $("button#test").click(function() { console.log("old .attr('value'):" + data); console.log("old input Type 2 .attr('value'):" + dataType2); console.log("old .val():" + data2); console.log("old .value:" + data3); console.log("old correct .value:" + data3_1); console.log("old .attr('class'):" + data4); //Updated Data console.log("new .attr('value'):" + $(".language").attr('value')); console.log("new .val():" + $('.language').val()); console.log("new .value:" + $('.language').value) console.log("new correct .value:" + $('.language')[0].value) console.log("new .attr('class'):" + $(".language").attr('class')) }) 

 <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" value="" placeholder=""> <input type="text" class="language-no-value-attr" name="language" placeholder=""> </div> <div class="button-wrapper text-center"> <button type="button" class="button next" id="test" >Go to step 2</button> </div> 

Answer 3

您应该在点击处理程序中从输入中获取值，如下面的代码段所示。

如果不这样做，则在键入输入框时，变量data2中的值不会更改。 因此，即使输入具有有效值，变量data2也会记录undefined 。

 $("button#test").click(function() { console.log($('.language').val()); }) 

 <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>