点击th元素获取data-count值始终为undefined，原因何在？

算力阿峰

2026-5-28

解决jQuery 1.4.1中无法读取data-count属性的问题

哦，这个问题我太熟了！罪魁祸首就是你用的jQuery 1.4.1版本太老了——它的.data()方法还不支持直接读取HTML5标准的data-*自定义属性，这就是为什么data_id一直是undefined的原因。

问题根源

在jQuery 1.5版本之前，.data()方法的设计逻辑和后来的版本完全不同：它主要用于读取jQuery内部存储的数据，或者是传统的data属性（比如<div data="value">），而不会自动识别并解析data-count这种带连字符的HTML5属性。

两种解决方案

方案1：升级jQuery版本（推荐）

这是最彻底的解决办法，毕竟jQuery 1.4.1是2010年的老版本，存在大量已知的bug和兼容性问题。只需要把你的jQuery引用换成1.5及以上版本（比如1.12.4或者更稳定的版本），原来的代码就能正常工作，甚至还可以简化——不用通过id重新查找元素，直接用$(this)操作：

$(".s_header").click(function() { 
    var $th = $(this);
    var data_id = $th.data('count');
    console.log($th.attr('id'));
    console.log(data_id);
    
    if (data_id % 2 == 0) {
        console.log("Even");
    } else {
        console.log("odd");
    }
    
    $th.data('count', data_id + 1);
});

方案2：不升级版本，改用`.attr()`方法

如果因为某些限制不能升级jQuery，那就直接用.attr()来读取和修改data-count属性，注意要把读取到的字符串转成数字，否则取模运算会出错：

$(".s_header").click(function() { 
    var column_id = $(this).attr('id');
    // 转成整数，第二个参数10是十进制基数，避免进制问题
    var data_id = parseInt($('#' + column_id).attr('data-count'), 10);
    console.log(column_id);
    console.log(data_id);
    
    if (data_id % 2 == 0) {
        console.log("Even");
    } else {
        console.log("odd");
    }
    
    $('#' + column_id).attr('data-count', data_id + 1);
});