Question

这是我在进度条中遇到的问题。我的“pro-bar”类中有data-percent属性。每个数据百分比是不同的，但在浏览器中我得到第一个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

你的问题是你如何在每个内部引用你的职业棒。使用“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方法也是如此）。然后当你遍历每个元素时，多次调用同样的效果。

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

1 个答案: