jquery - 如何获取选择菜单的数据属性

Question

我有以下代码 - 当我尝试记录 val 或 id 时，它会输出我需要的内容。然而，当我输出最大值时，我得到未定义。有什么想法吗？

HTML

<select data-maximum="1" class="missing" name="15077" id="15077">
    <option value="0" selected>0 items missing</option>
    <option value="1" >1 item missing</option>
</select>

jQuery

$(document).ready(function() {
    $('.missing').change(function() {
        var val = $(this).val();
        var id = $(this).attr("id");
        var maximum = $(this).attr("maximum");
        console.log(maximum);

Answer 1

这是因为使用 attr() 时需要包含 data- 前缀。话虽这么说，我建议使用 data() 而不是 attr()，在这种情况下，您不需要使用前缀。

$('.missing').change(function() {
  var val = $(this).val();
  var id = $(this).attr("id");
  var maximum = $(this).data("maximum"); // or: $(this).attr("data-maximum");
  console.log(maximum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-maximum="1" class="missing" name="15077" id="15077">
    <option value="0" selected>0 items missing</option>
    <option value="1" >1 item missing</option>
</select>

请注意，data() 将为您强制转换数据类型，因此在这种情况下，maximum 将是一个整数。使用 attr() 将始终返回一个字符串。