Question

我有以下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);

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

代码工作正常。见this。第二个链接无效，因为您忘记了点在jQuery选择器中。所以你必须改变

$('.latestNewsWidgetMoreLink, latestNewsWidgetMoreButton')

在

$('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton')

jQuery |数据属性更新问题

3 个答案: