Question

我想滑动一个放在另一个下方的div，但我不知道如果它顶部的div滑落，如何选择下一个div。

在这个例子中，一旦红色div滑动，我如何选择蓝色div滑开。我需要选择顶部div作为每个div，将有一个与键码相关联的功能。

$(document).ready(function() {            
  $(document).keyup(function (e) {
    var keyCode = e.keyCode || e.which,
        arrow = {
          left: 37,
          up: 38,
          right: 39,
          down: 40
        };
    switch (keyCode) {
      case arrow.left: 
        $(".red").animate({ "left": "-100%" }, "slow");
        break;
      case arrow.right: 
        $(".red").animate({ "left": "0%" }, "slow");
        break;
    }
  });
});

html, body {
  height: 100%;
  margin: 0;
  display: flex;
}
.red {
  background-color: red;
  height: 100%;
  width: 100vw;
  position: absolute;
  z-index: 3;
}
.blue {
  background-color: blue;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
}
.green {
  background-color: green;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>

Answer 1

我理解的是你希望div按照按下的右箭头键或左箭头键滑动。这就是你需要的。使用一个活动类（类可以有任何名称不需要处于活动状态，我已经使用了活动状态），这将帮助你获得当前的顶部div并使用它来获取下一个和前一个div并相应地滑动它们。

＆＃13;

$(document).ready(function(){            
    $(document).keyup(function (e) {
        var keyCode = e.keyCode || e.which,
        arrow = {left: 37, up: 38, right: 39, down: 40 };
	    var currentDiv=$('.active');
        switch (keyCode) {
            
            case arrow.left:
                if (currentDiv.next("div").length>0) {
                    currentDiv.animate({ "left": "-100%" }, "slow");
                    currentDiv.next("div").addClass("active");
                    currentDiv.removeClass("active");
                }
                
            break;
            
            case arrow.right:
                if (currentDiv.prev("div").length>0) {
                    currentDiv.prev("div").animate({ "left": "0%" }, "slow");
                    currentDiv.prev("div").addClass("active");
                    currentDiv.removeClass("active");
                }
            break;
        }
    });
});

＆＃13;

	html, body {
  height: 100%;
  margin: 0;
  display: flex;
}
.active{
z-index:100;
}
.red {
  background-color: red;
  height: 100%;
  width: 100vw;
  position: absolute;
  z-index: 3;
}


.blue {
		background-color: blue;
		height: 100%;
		width: 100%;
		position: absolute;
    z-index: 2;
	}
  
  .green {
		background-color: green;
		height: 100%;
		width: 100%;
		position: absolute;
    z-index: 1;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red active"></div>
<div class="blue"></div>
<div class="green"></div>

＆＃13;

以下是更新后的Fiddle 无论存在的分割数量如何，此代码都将起作用。

有关.next()和.prev()的更多信息，请查看

Answer 2

您可以使用计数器和数组来完成此操作。

首先，您可以通过设置i：

的变量来创建计数器

var i = 0;

i变量必须在$(document).ready(function(){之后声明，就好像你在keyup监听器中那样，每当你按下一个不是你想要的键时它就会被覆盖

然后你可以创建一个包含所有div类的数组，如下所示：

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

您可以使用计数器循环浏览每个div，方法是添加和删除每个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;

如果你看看这个jsfiddle，你可以看到这个使用完整的代码：https://jsfiddle.net/q8ddpqsc/5/

将后续div放在另一个下面

2 个答案: