Javascript 滑动一个置于另一个之下的后续div

我想滑动一个置于另一个之下的div，但我不知道如何选择下一个div，一旦它的顶部的div滑动

在本例中，当红色div滑动时，如何选择要滑动的蓝色div。我需要选择最上面的div，因为对于每个div，都会有一个与keycode关联的函数

JSFiddle：

$（文档）.ready（函数（）{
$（文档）.keyup（函数（e）{
var keyCode=e.keyCode | e.which，
箭头={
左：37，
上升：38，
右：39，
下降：40
};
开关（钥匙代码）{
大小写箭头。左：
$（“.red”）.animate（{“left”：“-100%”，}，“slow”）；
打破
大小写箭头。右：
$（“.red”）.animate（{“left”：“0%”，}，“slow”）；
打破
}
});
});
html，正文{
身高：100%；
保证金：0；
显示器：flex；
}
瑞德先生{
背景色：红色；
身高：100%；
宽度：100vw；
位置：绝对位置；
z指数：3；
}
蓝先生{
背景颜色：蓝色；
身高：100%；
宽度：100%；
位置：绝对位置；
z指数：2；
}
格林先生{
背景颜色：绿色；
身高：100%；
宽度：100%；
位置：绝对位置；
z指数：1；
}
我的理解是，您希望div在按下向右或向左箭头键的基础上滑动。这是你需要的。使用一个活动类（类可以有任何名称，不必是活动的，我使用的是活动的），这将帮助您获取当前的顶部div，并使用它可以获取下一个和上一个div，并相应地滑动它们


$（文档）.ready（函数（）{
$（文档）.keyup（函数（e）{
var keyCode=e.keyCode | e.which，
箭头={左：37，上：38，右：39，下：40}；
var currentDiv=$（'.active'）；
开关（钥匙代码）{
大小写箭头。左：
如果（当前div.next（“div”）.length>0）{
currentDiv.animate（{“左”：“-100%”，}，“慢”）；
当前div.next（“div”）.addClass（“活动”）；
currentDiv.removeClass（“活动”）；
}
打破
大小写箭头。右：
如果（当前div.prev（“div”）.长度>0）{
currentDiv.prev（“div”）.animate（{“left”：“0%”，}，“slow”）；
当前分区上一级（“分区”）.addClass（“活动”）；
currentDiv.removeClass（“活动”）；
}
打破
}
});
});
html，正文{
身高：100%；
保证金：0；
显示器：flex；
}
.主动{
z指数：100；
}
瑞德先生{
背景色：红色；
身高：100%；
宽度：100vw；
位置：绝对位置；
z指数：3；
}
蓝先生{
背景颜色：蓝色；
身高：100%；
宽度：100%；
位置：绝对位置；
z指数：2；
}
格林先生{
背景颜色：绿色；
身高：100%；
宽度：100%；
位置：绝对位置；
z指数：1；
}
您可以通过使用计数器和数组来实现这一点

首先，您可以通过设置变量
i
来创建计数器：

var i = 0;

i
变量必须在
$（document）.ready（function（）{
之后声明，就像您在
keyup
侦听器中执行该操作一样，每次按下一个不需要的键时，它都会被覆盖

然后，您可以使用所有div类创建一个数组，如下所示：

var divs = [".red", ".blue", ".green"];

您可以使用计数器在每个div中循环添加和删除，具体取决于您是将div滑回桩上还是滑出桩

因此，在switch语句中，您将有如下内容：

case arrow.left:

    if(i < divs.length-1){
        $(divs[i]).animate({"left": "-100%"}, "slow");
        i++;
    }

break;

case arrow.right: 
    if(i > 0){
        i--;
        $(divs[i]).animate({"left": "0%"}, "slow");
    }

break;

case arrow.left：
如果（i0）{
我--；
$（divs[i]）.animate（{“left”：“0%”，}，“slow”）；
}
打破

如果你看一下这个JSFIDLE，你可以看到它使用完整的代码：
这部分解决了问题，但我需要找出哪个div在顶部的原因是..假设当前div是蓝色的，那么If（current div==blue）然后for case arrow.left（function（））；case arrow.down（function（））。这样，每个当前div都将有一个基于键码的函数。因此，我需要一种方法来找出哪个div位于顶部。我认为我没有完全了解您正在尝试的内容。如果我错了，请更正我。情况是，每个div将有不同的处理程序用于按向右和向左箭头键，您希望改为执行该处理程序现在是这样的。你也可以根据具体情况更新小提琴。我会提供更好的帮助。首先，红色的div将是顶部的div。按下左箭头，蓝色的div将可见。此时，我当前的div将是蓝色的div。对于蓝色的div，我想保留三个函数su在左键按下时，绿色会出现，在右键按下时，红色会出现，在下键按下时，蓝色的div会滑到顶部，露出另一个div。如果不清楚，我很抱歉。好的，我现在知道了。所以你想要的是，除了右键按下和左键按下外，你还需要一个向下或向上箭头键按下和向下箭头键的处理程序这应该向上或向下滑动当前的infocus/on top div以显示更多的div。因此，您基本上希望水平滑动div和垂直滑动div。请更新竖直和水平div的html标记（这样我就可以了解DOM的外观。）有什么方法可以让我使用计数器来找出哪个div当前位于顶部。因为我有基于顶部的函数div@RakeshRenzous顶部是指您当前正在查看的div？还是指检查您是否正在查看顶部div？如果您是指检查您当前正在查看的div，您可以使用计数器通过添加
co