jQuery属性访问异常：为何部分data属性取值为undefined

这问题我之前也碰到过，核心原因是你找.filter元素的路径完全错了！

问题根源 #

你把点击事件绑定在了input元素上，当触发点击事件时，$(this)指向的是当前被点击的input标签。而你用$(this).find(".filter")是在尝试从input的子元素里查找class为filter的元素，但看你的HTML结构：

.filter这个span是和input所在的<li>同级的父容器（那个<div>）里的元素，根本不是input的子节点！

所以$(this).find(".filter")会返回空的jQuery对象，调用attr()自然就得到undefined了。

至于data-filter-min和data-filter-max能正常获取，是因为这两个属性直接挂载在input元素本身上，$(this).attr()直接就能读取到当前元素的属性，路径是对的。

解决方案 #

根据你的HTML结构，有两种靠谱的修改方式：

1. 如果页面只有一个.filter元素

直接全局选择器获取即可：

$(".filters-button-group").on("click", "input", function() { 
  // 直接全局查找.filter元素
  var min = $(".filter").attr("data-filter-price-range-min"); 
  var max = $(".filter").attr("data-filter-price-range-max"); 
  var filter_min = $(this).attr("data-filter-min"); 
  var filter_max = $(this).attr("data-filter-max"); 
  console.log(min); 
  console.log(max); 
  console.log(filter_min); 
  console.log(filter_max); 
});

2. 如果页面有多个.filter元素（按容器关联）

通过closest()找到input所在的父容器，再在容器内查找.filter，这样能确保拿到对应容器的目标元素：

$(".filters-button-group").on("click", "input", function() { 
  // 先找到input所在的最外层div容器，再在容器内找.filter
  var $filter = $(this).closest("div").find(".filter");
  var min = $filter.attr("data-filter-price-range-min"); 
  var max = $filter.attr("data-filter-price-range-max"); 
  var filter_min = $(this).attr("data-filter-min"); 
  var filter_max = $(this).attr("data-filter-max"); 
  console.log(min); 
  console.log(max); 
  console.log(filter_min); 
  console.log(filter_max); 
});

另外，也可以用jQuery的data()方法来读取data属性，写法更简洁：

var min = $filter.data("filter-price-range-min");
var max = $filter.data("filter-price-range-max");

内容的提问来源于stack exchange，提问作者StackOverflowNewbie