jQuery |数据属性更新问题答案

【问题标题】：jQuery | data attribute update issuejQuery |数据属性更新问题
【发布时间】：2013-02-13 17:33:31
【问题描述】：

我有以下 jQuery 代码：

这是 HTML：

<div 
    class="continueReading" 
    data-skip="0" 
    data-categories="22,243" 
    data-is="single" 
    data-s="cd1f2f7a7d" 
    data-list="latestNews-sidebar-1"
>
    <a href="javascript:void();" class="latestNewsWidgetMoreLink">get more</a>
    <a href="javascript:void();" class="latestNewsWidgetMoreButton">»</a>
</div>

而 jQuery 是这样的：

$('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton').click(
    function()
    {    
        total_items = 10;
        $(this).parent('div').attr('data-skip', total_items);
    }
);

但似乎不起作用。有人可以帮助我吗？这段代码有错误吗？

注意：我也尝试过以下代码，但没有成功：

total_items = 10;
$(this).parent('div').data('skip', total_items);

【问题讨论】：

正如 Adil 所说，向我们展示 HTML。还向我们展示围绕这几行的函数 - 如果我们不知道代码上下文中的 this 是什么，则很难解决。
如果您将 data 属性的值设置为相同的值，您如何期望知道它是否有效？
即使在此代码中也不起作用（注意已更改 div 数据属性的值）
与 HTML 文档相关的脚本在哪里 - 在 <head> 标记中，在 <body> 标记中的某处，就在 </body> 标记之前？它可能在元素存在之前执行，在这种情况下，您需要一个 DOM 就绪处理程序。

标签： jquery html5-data

【解决方案1】：

代码在this example jsFiddle 中适用于我。我怀疑代码执行得太早了，因此click 事件处理程序没有绑定到元素（因为它们还不存在）。尝试将其包装在 $(document).ready() 调用中：

$(document).ready(function () {
    $('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton').click(function () {
        total_items = 10;
        $(this).parent('div').data('skip', total_items);
    });
});

这将确保代码在 DOM 准备好之前不会执行，因此元素将存在并且可以绑定事件处理程序。

请注意，我做了一些调整：

从 <a> 元素的 href 属性中删除了分号 - 导致 JavaScript 语法错误
使用.data() jQuery 函数而不是.attr()

【讨论】：

【解决方案2】：

从两个链接中删除javascript:void();，然后用firebug检查HTML DIV并点击链接，它将设置data-skip="10";

【讨论】：

【解决方案3】：

代码运行良好。见this。第二个链接不起作用，因为您忘记了点在 jQuery 选择器中。所以你必须改变

$('.latestNewsWidgetMoreLink, latestNewsWidgetMoreButton')

在

$('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton')

【讨论】：

对不起@pbaris，但我在上面的代码中有一个错误。在我的真实代码中，我在 latestNewsWidgetMoreButton 之前有 (.)。非常感谢您的帮助:)