Javascript 如何定义第一个和最后一个对象并停止循环

我正在和你们分享一个，在那里，如果你把注意力集中在输入字段上，并按下键盘箭头键，它就会开始选择项目

一旦你到达最后一站，你就会再次站起来

---

我想限制它的方式是：如果你在最后一个项目上，它不会从顶部重新开始，并发出

警报（'no more！'）

，并保持在最后一个项目上；当箭头指向第一个箭头时，它将不再从最后一个箭头开始，而是保持在第一个箭头上。

以下是

导航功能主体的必要更改。与此相反：

if (displayBoxIndex >= oBoxCollection.length)
    displayBoxIndex = 0;
if (displayBoxIndex < 0)
    displayBoxIndex = oBoxCollection.length - 1;

在你的JS代码中有一个叫做导航的函数。。。这可以控制按键时发生的情况

一旦达到限制，下面的代码负责将光标移回起始位置

if (displayBoxIndex >= oBoxCollection.length)
     displayBoxIndex = 0;
if (displayBoxIndex < 0)
     displayBoxIndex = oBoxCollection.length - 1;

使用这些函数，您可以操纵光标超出边界时发生的情况。
尝试以下操作：您可以使用
：first
和
：last
检查第一个和最后一个元素

var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".qss.selected");

    if(oBoxCollection.length==0)
    {
        $(".qss:first").addClass('selected');
    }
    else if((diff==1 && oBoxCollection.is(':last')) || (diff==-1 && oBoxCollection.index()==0))
    {
        alert('No More!');
        return false;
    }
    else if(diff==1)
    { oBoxCollection.removeClass('selected').next('.qss').addClass('selected');
    }
    else if(diff==-1)
    { oBoxCollection.removeClass('selected').prev('.qss').addClass('selected');
    }
}

进行这些更改，而不是再次将displayboxindex指定给0

if (displayBoxIndex >= oBoxCollection.length){
       //1.  
            alert("No More..")
        //2.  
             return
    }

更改如下所示的导航方法

var Navigate = function(diff) {

   displayBoxIndex += diff;
   var oBoxCollection = $(".qss");
   if(displayBoxIndex<0){
      displayBoxIndex=0;
      alert("no more");
   }
   if(displayBoxIndex>=oBoxCollection.length){
      displayBoxIndex=oBoxCollection.length-1;
      alert("no more"); 
   }

   var cssClass = "selected";
   oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}   

var导航=功能（差异）{
displayBoxIndex+=diff；
var oBoxCollection=$（“.qss”）；
if（displayBoxIndex=oBoxCollection.length）{
displayBoxIndex=oBoxCollection.length-1；
警惕（“不再”）；
}
var cssClass=“已选定”；
oBoxCollection.removeClass（cssClass.eq（displayBoxIndex.addClass）（cssClass）；
}   
我看到它在fiddle中工作，我想最后停止它，首先，我很抱歉我的javascript非常弱，逻辑没有进入我的脑海：（你能帮我更新fiddle吗？谢谢你这么多的工作：）当arrow试图从最后一个向下移动时，我如何提醒（不再！）我很困惑，每个人都立刻给出了正确的答案，选择任何人都可能对其他人不公平，所以让我们不回答，或者让管理层决定。这是为了你和所有人所付出的宝贵时间。：）
var Navigate = function(diff) {
    displayBoxIndex += diff;
    var oBoxCollection = $(".qss.selected");

    if(oBoxCollection.length==0)
    {
        $(".qss:first").addClass('selected');
    }
    else if((diff==1 && oBoxCollection.is(':last')) || (diff==-1 && oBoxCollection.index()==0))
    {
        alert('No More!');
        return false;
    }
    else if(diff==1)
    { oBoxCollection.removeClass('selected').next('.qss').addClass('selected');
    }
    else if(diff==-1)
    { oBoxCollection.removeClass('selected').prev('.qss').addClass('selected');
    }
}

if (displayBoxIndex >= oBoxCollection.length){
       //1.  
            alert("No More..")
        //2.  
             return
    }

var Navigate = function(diff) {

   displayBoxIndex += diff;
   var oBoxCollection = $(".qss");
   if(displayBoxIndex<0){
      displayBoxIndex=0;
      alert("no more");
   }
   if(displayBoxIndex>=oBoxCollection.length){
      displayBoxIndex=oBoxCollection.length-1;
      alert("no more"); 
   }

   var cssClass = "selected";
   oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
}