javascript - 如何为不同的ID分别运行相同的功能

Question

我正在尝试为多个进度/加载栏设置动画。下面的代码按照我想要的方式工作，我可以复制并粘贴然后替换 ID 名称，但这似乎不必要地长。将 jquery 代码与不同类型的 ID(例如:#bar-x、#bar-y、#bar-z)一起使用的有效方法是什么？我尝试过用逗号分隔，如下所示

$(function() {
  var $stat = $('#bar-x, #bar-y, #bar-z');

  $stat.waypoint(function() {
    $stat.css({
    animation: "loading 1s linear",
    opacity: "1"
    });
  }, { offset: '95%' });
});

但是当第一个对象达到要求时，而不是每个单独的对象达到所述要求时，它会同时运行所有动画。

Answer 1

你总是可以将它包装在一个函数中并像这样使用它

function myAnimation(selector){
  selector.waypoint(function() {
    selector.css({
      animation: "loading 1s linear",
      opacity: "1"
    });
  }, { offset: '95%' });
}

myAnimation($('#bar-y'));

这样您就可以使用任何类型的选择器重复并可重复使用方式调用动画。

我建议阅读一些函数式编程。