复选框触发表单change事件时，无法获取最近h2文本的问题

文本的问题 #

我来帮你搞定这个问题！你当前的代码之所以返回undefined，是因为没搞清楚DOM元素之间的关系，用错了遍历方法，咱们一步步拆解：

问题根源 #

• $(this).closest("h2")：closest()是向上遍历当前元素的所有祖先节点，但你的<h2>是和复选框所在的.option同级的兄弟元素，并非复选框的祖先，所以找不到。
• $(this).find("h2")：find()是向下遍历当前元素的所有后代节点，复选框是<input>标签，根本没有后代元素，自然也找不到<h2>。

正确解决方案 #

根据你当前的DOM结构，我们可以先定位到复选框所在的.option容器，再通过prevAll()找到它前面最近的<h2>元素：

$(document).ready(function(){
  $('#productFilterForm').on('change', 'input:checkbox', function () {
    // 先找到当前复选框所在的.option容器，再找前面最近的h2
    let text = $(this).closest('.option').prevAll('h2').first().text();
    console.log(text); // 会输出"Brands"
  });
});

扩展优化（如果后续结构调整） #

要是以后你给每个属性组（<h2>+下方选项）加了父容器，比如：

<form action="" method="get" id="productFilterForm">
  <div class="attribute-group">
    <h2 class="attribute-name">Brands</h2>
    <div class="option">...</div>
    <div class="option">...</div>
  </div>
  <div class="attribute-group">
    <h2 class="attribute-name">Sizes</h2>
    <div class="option">...</div>
  </div>
</form>

这种情况下可以用更直观的写法：先找到属性组容器，再内部查找<h2>：

let text = $(this).closest('.attribute-group').find('h2').text();

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