javascript - 查找具有某个类的所有元素，将它们的 ID 保存到一个数组中，然后将该 ID 数组传递到回调中

Question

我正在使用路径点和动画 CSS 来为页面上的元素添加动画效果。我想要查找具有 animated 类的所有元素，将它们的 ID 存储在名为 ids 的数组中，然后通过我编写的名为 animatedContent< 的回调传递该数组。 HTML 结构示例:

<div id="element-1" class="animated">
  <h2>Content</h2>
</div>
<div id="element-2" class="animated">
  <h2>Content-2</h2>
</div>
<div id="element-3" class="animated">
  <h2>Content-3</h2>
</div>

JQuery 代码:

var ids = $('.animated').map(function(index) {
  // this callback function will be called once for each matching element
  return this.id;
});

var animatedContent = function(animateItem) {
  // hide our element on page load
  $(animateItem).css('opacity', 0);
  // takes element and passes it through the animatedContent Callback
  $(animateItem).waypoint(function() {
    $(animateItem).addClass('fadeInRight');
  }, { offset: '100%' });
};
animatedContent("#"+"ids");

Answer 1

您的逻辑几乎是正确的，您只需将选择器作为字符串传递给函数，并在它们前面加上 # 前缀，如下所示:

var ids = $('.animated').map(function(index) {
  return '#' + this.id;
});
animatedContent(ids.join(','));

但是创建一个数组来保存 jQuery 对象中的 id 属性，然后将其传递给另一个函数，然后返回到 jQuery 对象是完全多余的。您可以直接在函数中使用选定的元素，如下所示:

var animatedContent = function() {
  $('.animated').css('opacity', 0).waypoint(function() {
    $(this).addClass('fadeInRight');
  }, { 
    offset: '100%' 
  });
}