javascript - 动画功能不适用于每个元素

Question

这是我在进度条中遇到的问题。我的“pro-bar”类中有数据百分比属性。每个数据百分比都是不同的，但是在浏览器中我得到第一个 pro-bar 的数据百分比值应用于所有

这是我的代码:

$('.pro-bar').each(function( i, elem ){
    var percent = $('.pro-bar').attr('data-percent'),
        barparcent = Math.round(percent*5.56),
        $elem = $(this);

        console.log(percent);

    $elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});

Answer 1

您的问题是您如何在 each 中引用您的 pro-bar。使用“this”来引用当前元素，而不是一般的类选择器。

$('.pro-bar').each(function( i, elem ){
    var percent = $(this).attr('data-percent'),//change here
        barparcent = Math.round(percent*5.56),
        $elem = $(this);

        console.log(percent);

    $elem.animate({'width':barparcent}, 2000, 'easeInOutExpo');
});

进一步说明:

$(".pro-bar").attr("data-percent")获取所有的.pro-bar，然后是.attr ("data-percent") 获取第一个元素的值(与大多数其他类似的 jquery 方法一样)。然后，当您遍历每个元素时，将多次调用相同的效果。