javascript - 如何循环访问 DIV

Question

我希望我的页面一次显示 3 个 div，当我单击下一步时，我希望它显示接下来的 3 个 div。然后当我点击上一个时，我想显示前 3 个。

$("#container .result").slice(0, 3).show();

   $("#right").click(function () {

       var items = $('#container .result:visible').hide().last();

       var nextItems = items.nextAll().slice(0, 3);

       if (nextItems.length === 0) {
           nextItems = $("#container .result").slice(0, 3);
       }

       nextItems.show();
   });
   $("#left").click(function () {

       var items = $('#container .result:visible').hide().last();

       var nextItems = items.prevAll().slice(0, 3);

       if (nextItems.length === 0) {
           nextItems = $("#container .result").slice(0, 3);
       }

       nextItems.show();
   });

问题是，当我单击上一个时，出现最后 3 个 div，当我再次单击时，它显示 2 比 1。我该如何解决这个问题？我希望它在前 3 个时停止。

Answer 1

您的方向非常正确，您代码的独创性给我留下了深刻的印象。

您的主要问题已通过非常简单的修复解决；在#left单击处理程序，替换 .last()与 .first() :

var items = $('#container .result:visible').hide().first();

当您在前 3 个上单击上一步时要循环到最后 3 个，请将此行更改为下一个:

nextItems = $("#container .result").slice(0, 3);

nextItems = $("#container .result").slice($("#container .result").length-3, $("#container .result").length);

---

但我认为现在或将来可能会出现这种情况，即 .result 的数量。这不是很多 3 ，比方说 7或 11例如。
我创建了一个脚本来处理这个问题，并在两个方向上循环:

$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
  var start=0, step=3;
  var currentItems = $("#container .result:visible").hide();
  var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
  var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());

  if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
    var itemsLength = $("#container .result").length;
    if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
    nextItems = $("#container .result").slice(start,step); //loop around
  } else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
    if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
    currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
  } else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
  nextItems.show(); //show the next set
}).click(); //initialize divs at pageload

• 在 HTML 中，我给了两个按钮一个类 "nav" (请参阅下面的代码片段)，以便我可以将它们的点击处理程序合并为一个。
• 我将您的第一行更改为:$("#container .result").first().show(); .该行 - 结合 .click()链接到点击处理程序 - 替换您的行:$("#container .result").slice(0, 3).show(); (在脚本的顶部)。
  这使您可以更灵活地更改 div 的数量。如果您想立即显示在页面上。在点击处理程序的开头，我声明 var step=3; ，这是该数字唯一被硬编码的地方，因此如果您想要更改金额，您只需更改该数字(并可能调整一些样式)。
• 其余解释在代码的注释中。

---

请参阅下面的代码片段以获取演示:

$("#container .result").first().show(); //initialize divs at pageload
$(".nav").click(function() {
  var start=0, step=3;
  var currentItems = $("#container .result:visible").hide();
  var currentLast = (this.id==="prev" ? currentItems.first() : currentItems.last());
  var nextItems = (this.id==="prev" ? currentLast.prevAll() : currentLast.nextAll());
  
  if (nextItems.length === 0) { //if the last set of divs has been reached, loop around
    var itemsLength = $("#container .result").length;
    if (this.id==="prev") {start=itemsLength-step; step=itemsLength;} //determine wich way to loop around
    nextItems = $("#container .result").slice(start,step); //loop around
  } else if (nextItems.length < step) { //if the next divs aren't a full set, keep some divs from the current set visible
    if (this.id==="prev") {step-=nextItems.length;} else {start=nextItems.length;} //determine which current items should remain visible
    currentItems.slice(start,step).each(function(){nextItems.push(this);}); //add selected current items to nextItems-array
  } else {nextItems=nextItems.slice(start,step);} //if the next divs are a full set, simply select the next set
  nextItems.show(); //show the next set
}).click(); //initialize divs at pageload

html,body {width:98%; height:90%;}

#container {width:100%; height:90%; background:lightgrey;}
#container .result {display:none; float:left; width:30%; height:100%; margin:0 1.66%; background:lightgreen;}
#container .result > div {display:table; width:100%; height:100%;}
#container .result > div > div {display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; font:bolder 2em sans-serif;}

.nav {margin-top:2%; cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="result"><div><div>1</div></div></div>
  <div class="result"><div><div>2</div></div></div>
  <div class="result"><div><div>3</div></div></div>
  <div class="result"><div><div>4</div></div></div>
  <div class="result"><div><div>5</div></div></div>
  <div class="result"><div><div>6</div></div></div>
  <div class="result"><div><div>7</div></div></div>
</div>
<button type="button" class="nav" id="prev">PREVIOUS</button>
<button type="button" class="nav" id="next">NEXT</button>

代码笔:https://codepen.io/anon/pen/YQoJzd?editors=1010
jsfiddle:https://jsfiddle.net/k8ysj6gq/1/

• 您可以忽略 CSS 和 HTML(按钮上的 class="nav" 除外)，这只是为了让我们可以看到它。所有相关代码都在 JS 中。