jQuery中输入框输入时如何获取父元素的data-value属性值？

需求：当用户向name为txt的input输入框输入内容时，获取其祖先元素的data-value属性值Tomatoe，但现有jQuery代码无法实现功能。

错误代码示例 #

JS代码 #

$('input[name=txt]').on('input', function() {
  var module = $(this).closest('[data-value]').val();
  alert(module);
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-value="Tomatoe">
  <div>
    <input type="text" class="form-control" name="txt" required>
  </div>
</div>

问题原因 #

.val()方法是专门用于获取**表单元素（如input、select、textarea）**的value属性值的，而通过.closest('[data-value]')找到的是div元素，属于普通DOM元素，不能用.val()来获取它的自定义属性。

解决方法 #

要获取div元素的data-value属性，有两种常用方式：

1. 使用.attr('data-value')直接获取属性值
2. 使用jQuery的.data('value')方法，该方法会读取元素的data属性并做类型转换（字符串场景下两种方法效果一致）

修改后的JS代码 #

$('input[name=txt]').on('input', function() {
  // 方法一：用attr获取
  var module = $(this).closest('[data-value]').attr('data-value');
  // 方法二：用data获取
  // var module = $(this).closest('[data-value]').data('value');
  alert(module);
});

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