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变量 click事件，如下所示：

＆＃13;
＆＃13;
// 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); });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

为什么import subprocess import time process = subprocess.Popen(['gnome-terminal', '-e', "gedit"]) time.sleep(3) process.terminate()未定义？

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

为什么<input>没有返回正确的值？

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

val()

请运行以下代码段以检查差异。希望这会让事情变得更清楚。

更多测试场景

＆＃13;

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

＆＃13;

  // 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'))
    })

＆＃13;

Answer 3

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

如果您没有，变量data2中的值在您输入输入框时不会发生变化。因此，即使输入具有有效值，变量data2也会记录undefined。

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery .val（）没有得到价值

3 个答案: