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%' 
  });
}

Answer 2

（你的问题实际上并没有说出错了，但......）

除最后一行外，你的脚本大多数都很好。 animatedContent("#"+"ids");与animatedContent("#ids");相同 - 根本不使用变量ids，只是包含单词“ids”的字符串。

你的animatedContent需要一个适合$(...)的参数，即它应该是#a,#b,#c之类的CSS选择器。我建议在创建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);

使用类查找所有元素，将其ID保存到数组中，然后将该ID数组传递给回调

2 个答案: