jquery 为什么更新数据属性的代码不起作用?

axr492tv  于 2023-03-17  发布在  jQuery
关注(0)|答案(3)|浏览(124)

下面的代码:

<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>
$('.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);
mgdq6dx1

mgdq6dx11#

这段代码在this example jsFiddle中很好用,我怀疑代码执行得太早了,结果click事件处理器没有绑定到元素(因为它们还不存在),尝试将其 Package 在$(document).ready()调用中:

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

这将确保代码在DOM准备好之前不会执行,因此元素将存在并可以绑定事件处理程序。
请注意,我做了一些调整:
1.从<a>元素的href属性中删除分号-导致JavaScript语法错误
1.使用.data() jQuery函数而不是.attr()

jk9hmnmh

jk9hmnmh2#

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

uubf1zoe

uubf1zoe3#

代码运行良好,请参见this。第二个链接不起作用,因为您忘记了jQuery选择器中的点。

$('.latestNewsWidgetMoreLink, latestNewsWidgetMoreButton')

$('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton')

相关问题