Question

我正在尝试在Javascript中实现以前的下一个功能，但它只给了我下一个元素。

我已经使用currentItemIndex作为开始按钮的敬意。我从第5项开始，点击下一步按钮我试图获得6日，7日8日等等。反之前的按钮也是如此。

<!DOCTYPE html>
<html>
<head>
    <title>Previous Next Functionality</title>
    <script type="text/javascript">

    var myItemObjectArray = new Array();
    var currentItemIndex = 5;

    alert("CURRENT ITEM INDEX " + currentItemIndex);
    for(i=0;i<10;i++)
        {
            var ItemCatalog = new Object();

            ItemCatalog.itemId = i;
            ItemCatalog.itemName = "a"+i;

            myItemObjectArray.push(ItemCatalog);
            /*alert("OBJECT ADDED " + myItemObjectArray.length);*/
        }


    function getPrevious(currentItemIndex, myItemObjectArray)
        {
            var localCurrentItemIndex = currentItemIndex-1;
            alert("PREVIOUS OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);

            // Modify Current Item Index
            currentItemIndex--;
            alert(currentItemIndex);
        }   

    function getNext(currentItemIndex, myItemObjectArray)
        {
            var localCurrentItemIndex = currentItemIndex+1; 
            alert("NEXT OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);
            // Modify Current Item Index
            currentItemIndex++;
            alert(currentItemIndex);
        }   
    </script>
</head>

<body>
    <button id="previous" onclick="getPrevious(currentItemIndex, myItemObjectArray)">Previous</button>
    <button id="next" onclick="getNext(currentItemIndex, myItemObjectArray)">Next</button>
</body>
</html>

同样的元素不断重复。

ANKIT

Answer 1

问题是你的getNext和getPrevious函数有一个名为currentItemIndex的参数，匹配你试图用作维护索引计数器的全局变量。它是一个整数，所以它是按值传递的，而不是通过引用传递的。

因此，当您执行currentItemIndex++或currentItemIndex--时，您正在更改参数变量的值，而不是全局变量。

更改全局变量的名称以及要匹配的函数末尾的相应增量/减量行，或者更改这两个函数中的参数名称以及要匹配的第一行。

Answer 2

函数getPrevious（）/ getNext（）中的currentItemIndex是按值传递而不是按变量/按引用传递。对这些函数中的currentItemIndex的修改不会传播回函数退出时传递的实际参数。

典型的替代方案包括：

使用函数return将下一个或上一个索引值与调用这些函数的代码中的赋值一起传回; OR
创建一个包含列表和游标的对象，它记录光标在其状态中的位置，可以通过prev（）/ next（）

Answer 3

我的版本DEMO

删除onclicks并将它们放在头部

更改show以执行您需要执行的任何操作

HTML

<button id="previous">Previous</button>
<span id="curidx"></span>
<button id="next">Next</button>

的JavaScript

function show() { 
  var item = myItemObjectArray[currentItemIndex];
  document.getElementById("curidx").innerHTML=item.itemId+":"+item.itemName
  document.getElementById("previous").disabled=currentItemIndex<=0;
  document.getElementById("next").disabled=currentItemIndex>=myItemObjectArray.length-1;

}

var myItemObjectArray = new Array();
var currentItemIndex = 5;
window.onload=function() {
  document.getElementById("previous").onclick=function() {
    currentItemIndex--;
    if (currentItemIndex<=0) {
      currentItemIndex=0;
    }
    show();       
  }
  document.getElementById("next").onclick=function() {
    currentItemIndex++;
    if (currentItemIndex>=myItemObjectArray.length-1) {
      currentItemIndex=myItemObjectArray.length-1;
    }
    show();       
  }
  for(i=0;i<10;i++) {
    var ItemCatalog = new Object();
    ItemCatalog.itemId = i;
    ItemCatalog.itemName = "a"+i;
    myItemObjectArray.push(ItemCatalog);
  }
  show();
}

Answer 4

function getNext(currentItemIndex, myItemObjectArray)

使用该函数声明，您有一个本地（参数）变量currentItemIndex。用线

currentItemIndex++;

您现在只修改该局部变量，而不是全局值。只要省略它就可以了。

或者使用它：

var myItemObjectArray = [];
for (i=0;i<10;i++)
    myItemObjectArray.push( {itemId: i, itemName:"a"+i} );
var currentItemIndex = 5;

function getPrevious() {
    currentItemIndex--; // the global variable
    show(currentItemIndex, myItemObjectArray);
}
function getNext() {
    currentItemIndex++; // the global variable
    show(currentItemIndex, myItemObjectArray);
}

function show(index, arr) {
    alert( arr[index].itemId + " " + arr[index].itemName);
}

<button id="previous" onclick="getPrevious()">Previous</button>
<button id="next" onclick="getNext()">Next</button>

Answer 5

请遵循此代码

所做的更改 1）onclick="getPrevious()" onclick="getNext()"无需传递args，因为它们被声明为全局。 2）直接在函数的开头使用currentItemIndex++;和currentItemIndex--;。如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>Previous Next Functionality</title>
    <script type="text/javascript">

    var myItemObjectArray = new Array();
    var currentItemIndex = 5;

    alert("CURRENT ITEM INDEX " + currentItemIndex);
    for(i=0;i<10;i++)
        {
            var ItemCatalog = new Object();

            ItemCatalog.itemId = i;
            ItemCatalog.itemName = "a"+i;

            myItemObjectArray.push(ItemCatalog);
            /*alert("OBJECT ADDED " + myItemObjectArray.length);*/
        }


    function getPrevious()
        {
            currentItemIndex--;
            alert(currentItemIndex);
            alert("PREVIOUS OBJECT" + myItemObjectArray[currentItemIndex].itemId + " " + myItemObjectArray[currentItemIndex].itemName);

            // Modify Current Item Index
        }   

    function getNext()
        {
            currentItemIndex++;
            alert(currentItemIndex);
            alert("NEXT OBJECT" + myItemObjectArray[currentItemIndex].itemId + " " + myItemObjectArray[currentItemIndex].itemName);
            // Modify Current Item Index

        }   
    </script>
</head>

<body>
<button id="previous" onclick="getPrevious()">Previous</button>
<button id="next" onclick="getNext()">Next</button>
</body>
</html>

Answer 6

var myItemObjectArray = new Array();
var currentItemIndex = 5;

alert("CURRENT ITEM INDEX " + currentItemIndex);
for(i=0;i<10;i++)
    {
        var ItemCatalog = new Object();

        ItemCatalog.itemId = i;
        ItemCatalog.itemName = "a"+i;

        myItemObjectArray.push(ItemCatalog);
        /*alert("OBJECT ADDED " + myItemObjectArray.length);*/
    }

function getPrevious(currentItemIndex, myItemObjectArray)
    {
        if(currentItemIndex > myItemObjectArray.length)
                {
                    alert("THERE ARE NO MORE ITEMS TO DISPLAY");
                }
        var localCurrentItemIndex = currentItemIndex-1;
        alert("PREVIOUS OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);

        // Modify Current Item Index
        modifyCurrentIndex("previous");
    }   

function getNext(currentItemIndex, myItemObjectArray)
    {
        var localCurrentItemIndex = currentItemIndex+1; 
        alert("NEXT OBJECT" + myItemObjectArray[localCurrentItemIndex].itemId + " " + myItemObjectArray[localCurrentItemIndex].itemName);
        // Modify Current Item Index
        modifyCurrentIndex("next");
    }   

    function modifyCurrentIndex(mode)
        {
            if(mode == "next")
                {
                    currentItemIndex = currentItemIndex + 1;
                } else if(mode == "previous")
                    {
                        currentItemIndex = currentItemIndex - 1;
                    }
        }

我使用了一个单独的函数来修改全局变量。我也从上述解决方案中得到了这个想法。

谢谢， ANKIT。

Javascript中的上一个下一个

6 个答案: