对奇数和偶数div集重复相同的动画

Question

我正在尝试熟悉jQuery waypoints。我想知道是否还有我可以简化以下代码。我尝试通过检查item-*的偶数/奇数并将其包装在if else函数中来完成此操作，但是它不起作用。

    $('.features-task-management-item-1').css('opacity', 0);
    $('.features-task-management-item-1').waypoint(function() {
        $('.features-task-management-item-1').addClass('fadeInLeft');
    }, { offset: '70%' });
    $('.features-task-management-item-2').css('opacity', 0);
    $('.features-task-management-item-2').waypoint(function() {
        $('.features-task-management-item-2').addClass('fadeInRight');
    }, { offset: '70%' });
    $('.features-task-management-item-3').css('opacity', 0);
    $('.features-task-management-item-3').waypoint(function() {
        $('.features-task-management-item-3').addClass('fadeInLeft');
    $('.features-task-management-item-4').css('opacity', 0);
    $('.features-task-management-item-4').waypoint(function() {
        $('.features-task-management-item-4').addClass('fadeInRight');
    $('.features-task-management-item-5').css('opacity', 0);
    $('.features-task-management-item-5').waypoint(function() {
        $('.features-task-management-item-5').addClass('fadeInLeft');

    }, { offset: '70%' });

Answer 1

我对Waypoint不太熟悉，但这是我的想法。如果您可以将元素的类别（features-task-management-item-）重命名为没有数字的类别（features-task-management-item），则可以这样做。如果不能，则可以像这样使用jqueryselector$('[class^="features-task-management-item-"]')

所以重点是使用JQuery each方法遍历所有项目并将索引用作偶数/奇数标记。

$('.features-task-management-item').each(function(i) {
    var index = i + 1;
    var $item = $(this);
    var isEven = index % 2 == 0;
    var fadeClass = isEven ? 'fadeInRight' : 'fadeInLeft';

    $item.css('opacity', 0);
    $item.waypoint(function() {
        $item.addClass(fadeClass);
    }, { offset: '70%' });
});

希望我有所帮助