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

animation function is not applied to each elements

本文关键字：元素 应用于 功能 动画      更新时间：2023-09-26

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

这是我的代码：

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

您的问题是如何在每个中引用您的专业栏。使用"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方法也是如此）。然后，当您循环遍历每个元素时，会多次调用相同的效果。

相关文章：