Question

我每次点击给定的data-count时都会尝试获取th属性，而下面是我的工作方式。出于某种原因，data_id的值始终为undefined，我无法找到原因。一定是真的很傻。

我在这里缺少什么？

＆＃13;

$(".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);
});

＆＃13;

<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>

＆＃13;

Answer 1

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

从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＆＃39;的全局对象，而不是更新dom。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

＆＃13;

$(".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);
});

＆＃13;

<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>

＆＃13;

Answer 4

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

＆＃13;

$(".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);
});

＆＃13;

<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>

＆＃13;

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

4 个答案: