Javascript中的上一个下一个_Javascript_Jquery_Html

Javascript中的上一个下一个

javascript jquery html

Javascript中的上一个下一个,javascript,jquery,html,Javascript,Jquery,Html,我试图在Javascript中实现前面的下一个功能，但它只给了我下一个元素我使用currentItemIndex作为按钮的开始。我从第5项开始，点击下一步按钮，我试图获得第6项、第7项和第8项，以此类推。对于上一个按钮，反之亦然 <!DOCTYPE html> <html> <head> <title>Previous Next Functionality</title> <script type="text/j

我试图在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>


上一个下一个功能
var myItemObjectArray=新数组（）；
var currentItemIndex=5；
警报（“当前项目索引”+当前项目索引）；
对于（i=0；i函数getPrevious（）/getNext（）中的currentItemIndex是通过值而不是通过变量/引用传递的。这些函数中对currentItemIndex的修改不会传播回函数退出时传递的实际参数
典型的备选方案包括：

使用函数return传回下一个或上一个索引值以及调用这些函数的代码中的赋值；或
创建一个包含列表和光标的对象，该对象记录光标在其状态下的位置，该状态可由prev（）/next（）的方法修改
问题在于getNext和getPrevious函数有一个名为currentItemIndex
的参数，该参数与试图用作维护的索引计数器的全局变量相匹配。它是一个整数，因此是通过值传递的，而不是通过引用传递的
因此，当您执行currentItemIndex++
或currentItemIndex--
时，您正在更改参数变量的值，而不是全局变量的值
更改全局变量的名称和要匹配的函数末尾对应的递增/递减行，或者更改这两个函数中的参数名称和要匹配的第一行。
遵循此代码
改变
1） onclick=“getPrevious（）”onclick=“getNext（）”无需传递参数，因为它们被声明为全局参数。
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>


上一个下一个功能
var myItemObjectArray=新数组（）；
var currentItemIndex=5；
警报（“当前项目索引”+当前项目索引）；
对于（i=0；i我的版本
去掉舔肉，放在头上
更改show以执行您需要该函数执行的任何操作
HTML
上一个
下一个

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();
}

函数show（）{
var item=myItemObjectArray[currentItemIndex]；
document.getElementById（“curidx”）.innerHTML=item.itemId+“：”+item.itemName
document.getElementById（“previous”）.disabled=currentItemIndex=myItemObjectArray.length-1；
}
var myItemObjectArray=新数组（）；
var currentItemIndex=5；
window.onload=function（）{
document.getElementById（“previous”）.onclick=function（）{
当前项目索引--；
if（currentItemIndex=myItemObjectArray.length-1）{
currentItemIndex=myItemObjectArray.length-1；
}
show（）；
}
对于（i=0；i
通过该函数声明，您有一个本地（参数）变量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);
}

var myItemObjectArray=[]；
对于（i=0；ivar myItemObjectArray=new Array（）；
var currentItemIndex=5；
警报（“当前项目索引”+当前项目索引）；
for（i=0；i myItemObjectArray.length）
{
警报（“没有更多要显示的项目”）；
}
var localCurrentItemIndex=currentItemIndex-1；
警报（“上一个对象”+myItemObjectArray[localCurrentItemIndex].itemId+“”+myItemObjectArray[localCurrentItemIndex].itemName）；
//修改当前项目索引
modifyCurrentIndex（“先前”）；
}   
函数getNext（currentItemIndex，myItemObjectArray）
{
var localCurrentItemIndex=currentItemIndex+1；
警报（“下一个对象”+myItemObjectArray[localCurrentItemIndex].itemId+“”+myItemObjectArray[localCurrentItemIndex].itemName）；
//修改当前项目索引
修改当前索引（“下一步”）；
}   
函数modifyCurrentIndex（模式）
{
如果（模式==“下一步”）
{
currentItemIndex=currentItemIndex+1；
}否则如果（模式==“上一个”）
{
currentItemIndex=currentItemIndex-1；
}
}

我使用了一个单独的函数来修改全局变量。我也从上面的解决方案中得到了这个想法
谢谢，
Ankit.
您试图通过哪些元素移动下一个/上一个..？我正在推送数组中的对象，并试图在单击“上一个”和“下一个”按钮时遍历每个对象另一件需要注意的事情是currentItemIndex对于数组的长度来说变得太低/太高（即=myItemObjectArray.length）这将起作用，但它消除了在将来重复使用getPrevious/getNext来遍历其他数组的可能性。我不这么认为，因为prev和next fun就像是预定义的push和pop。push和pop是数组原型上存在的函数，我可以理解为什么您可能需要getNext/getPrevious函数可以以相同的方式调用（并且具有数组固有的currentIndex-请参见@Paul编辑的答案），但对我来说，它不像OP试图实现的那样。正确设置它比这个问题更复杂。不确定为什么要使用id=“curidx”的元素要存储当前索引的值，不需要。对于调试/可视化reasons@mplungjan我在一个文件夹中有许多html文件。是否可以将它们连接起来，以便js访问以下文件？因此，如果有人在1.html
上单击next
按钮，就可以访问2.html。是吗
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);
}

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;
                    }
        }