找到所有带有 class 的元素，将它们的 ID 保存到一个数组中，然后将该 ID 数组传递到回调中

Question

我正在使用航点和动画 CSS 来为页面上的元素设置动画。我想找到 class 为 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%' 
  });
}

Answer 2

（你的问题实际上并没有说出什么问题，但是......）

除了最后一行，你的剧本大部分都不错。 animatedContent("#"+"ids"); 与 animatedContent("#ids"); 相同 - 根本不使用变量 ids，只是一个包含单词 "ids".

的字符串

您的 animatedContent 需要一个适合 $(...) 的参数，即它应该是 CSS 选择器，例如 #a,#b,#c。我建议在创建 ids 数组时立即在前面添加 #：

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

那么你可以简单地在最后加入这个数组：

animatedContent(ids.join(','));

编辑： 正如 Rory 在他的回答中指出的那样，您的方法有点多余。理想情况下，您可以将 animatedContent 函数直接应用于元素数组。这样，函数本身有点通用和可重用（即它可以与其他元素或选择器一起使用），同时又很短：

function animatedContent() {
  let item = $(this);
  // hide our element on page load
  item.css('opacity', 0);
  // takes element and passes it through the animatedContent Callback
  item.waypoint(function() {
    item.addClass('fadeInRight');
  }, { offset: '100%' });
}
$('.animated').each(animatedContent);

找到所有带有 class 的元素，将它们的 ID 保存到一个数组中，然后将该 ID 数组传递到回调中

Find all elements with a class, save their IDs into an array then pass that array of IDs into a callback

javascript

jquery

animate.css