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

How to define first and last object and stop the loop

本文关键字：一个对象 最后 循环 第一个 何定义 定义      更新时间：2023-09-26

我和你们分享一个小提琴，在那里，如果你专注于输入字段并移动键盘箭头向下键，它将开始选择项目。

一旦你到达最后一个，你就需要再次上升。

我想限制它是这样的:如果你在最后一项上，它不会从顶部重新开始并给出alert('no more!')，并保持在最后一个;当箭头指向第一个时，它不会再从最后一个开始，而是停留在第一个上。

以下是Navigate函数体中必要的更改。而不是:

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

你需要有这样一段代码:

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

警告看起来像这样:

if (displayBoxIndex >= oBoxCollection.length) {
    alert('no more!');
    displayBoxIndex = oBoxCollection.length - 1;
}

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

下面的代码负责在达到限制时将光标移回到开始位置。

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

如果你想让光标停在最后一个框，并提醒用户，把第一个If语句改成this…

if (displayBoxIndex >= oBoxCollection.length){
displayBoxIndex = displayBoxIndex  - 1;
alert("no more!");}

使用这些函数，您可以操作光标越界时发生的情况。

进行这些更改，而不是将displayboxindex再次赋值为0。

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

试试这个:您可以使用: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');
    }
}
<<p> JSFiddle演示/strong>

像下面这样改变导航方法，

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);
}
相关文章：