从data- *属性获取计数不起作用，为什么？

Question

我试图在每次点击给定的th时获取data-count属性，以下是我的工作方式。 由于某种原因， data_id的值总是undefined ，我无法找到原因。 一定是真的很傻。

我在这里缺少什么？

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <table class="s_grid" width="100%"> <tr class="header hover" style=""> <th id="col_1" data-count="0" class="s_header">Col 1</th> <th id="col_2" data-count="0" class="s_header">Col 2</th> <th id="col_3" data-count="0" class="s_header">Col 3</th> </tr> </table> 

Answer 1

问题是你的jQuery版本。 来自jQuery文档 ：

从jQuery 1.4.3开始，HTML 5数据属性将自动引入jQuery的数据对象。 在jQuery 1.6中改变了嵌入破折号属性的处理，以符合W3C HTML5规范。

将代码段切换为1.4.3而不是1.4.1可以解决问题，以便.data('count')返回'0' 。 请注意，在设置数据时仍然存在拼写错误（您使用的是.data('counter', ...)而不是.data('count', ...) 。

Answer 2

我不确定为什么.data()不起作用，但你可以通过使用this.dataset来简化你的代码，因为.data()会将值存储在jQuery的全局对象中，而不是更新dom。

 $(".s_header").click(function() { var count = parseInt(this.dataset.count); console.log(count % 2 == 0 ? "Even" : "Odd"); this.dataset.count++; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <table class="s_grid" width="100%"> <tr class="header hover" style=""> <th id="col_1" data-count="0" class="s_header">Col 1</th> <th id="col_2" data-count="0" class="s_header">Col 2</th> <th id="col_3" data-count="0" class="s_header">Col 3</th> </tr> </table> 

Answer 3

.data()仅适用于1.4.3或更高版本。 更新您的jquery版本或使用.attr("data-count")

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <table class="s_grid" width="100%"> <tr class="header hover" style=""> <th id="col_1" data-count="0" class="s_header">Col 1</th> <th id="col_2" data-count="0" class="s_header">Col 2</th> <th id="col_3" data-count="0" class="s_header">Col 3</th> </tr> </table> 

Answer 4

使用var data_id = $('#' + column_id).attr('data-count'); 代替。

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <table class="s_grid" width="100%"> <tr class="header hover" style=""> <th id="col_1" data-count="0" class="s_header">Col 1</th> <th id="col_2" data-count="0" class="s_header">Col 2</th> <th id="col_3" data-count="0" class="s_header">Col 3</th> </tr> </table>