如何控制台打印input的val值？jQuery赋值后输出异常求助

你遇到的问题核心是jQuery的val()方法的返回值特性：当你给val()传递参数（比如.val(dateSelected)）时，它的作用是设置元素的值，并且返回的是jQuery对象本身，而不是你刚刚设置的那个值。这就是为什么console.log(dateCat)输出的是r.fn.init [prevObject: r.fn.init(1)]（也就是jQuery实例），而不是你期望的2014。

有两种简单的方式可以得到你想要的结果：

方法1：先设置值，再单独获取 #

把设置值和获取值的操作分开，调用不带参数的val()来获取input当前的值：

$("#sandbox-container span").on("click", function(e) { 
  $("#sandbox-container span").removeClass("selected_year"); 
  $(this).attr("class", "selected_year"); 
  var dateSelected = $(".selected_year").text(); 
  // 先设置值
  $(".time_value").val(dateSelected); 
  // 再获取值赋值给dateCat
  var dateCat = $(".time_value").val(); 
  console.log(dateSelected); 
  console.log(dateCat); // 现在会输出2014/2018啦
}); 

方法2：利用链式调用（可选） #

如果你想在一行里完成，也可以用链式调用，在设置值后再调用一次无参的val()：

var dateCat = $(".time_value").val(dateSelected).val();

不过这种写法可读性稍差，更推荐第一种方法。

另外，你的代码里移除选中类的操作可以更高效一些：不需要选中所有#sandbox-container span，只需要给当前点击元素的兄弟元素移除类即可，同时用addClass代替attr("class")更安全（避免覆盖原有类）：

$("#sandbox-container span").on("click", function(e) { 
  // 只给当前元素的兄弟元素移除类
  $(this).siblings().removeClass("selected_year"); 
  $(this).addClass("selected_year"); 
  var dateSelected = $(this).text(); // 直接用当前元素的text，不用再查找.selected_year
  $(".time_value").val(dateSelected); 
  var dateCat = $(".time_value").val(); 
  console.log(dateSelected); 
  console.log(dateCat); 
}); 

内容的提问来源于stack exchange，提问作者rob.m