Javascript中的上一个下一个
[英]Previous Next in Javascript
问题描述
我正在尝试在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>
同一元素不断重复。
安奇
6 个解决方案
解决方案1
4 2013-01-08 13:37:17
问题在于您的getNext和getPrevious函数具有一个名为currentItemIndex的参数，该参数与您尝试用作维护的索引计数器的全局变量匹配。 这是一个整数，因此按值而不是按引用传递。
因此，当您执行currentItemIndex++或currentItemIndex-- ，您将更改参数变量的值，而不是全局变量。
更改全局变量的名称以及要匹配的函数末尾处相应的增/减行，或者更改这两个函数中的参数名称以及要匹配的第一行。
解决方案2
2 2013-01-08 13:37:00
函数getPrevious（）/ getNext（）中的currentItemIndex按值传递，而不是按变量/按引用传递。 这些函数中对currentItemIndex的修改不会传播回该函数退出时传递的实际参数。
典型的替代方案包括：
- 使用函数return返回下一个或上一个索引值以及调用这些函数的代码中的赋值； 要么
- 创建一个包含列表和游标的对象，该对象记录游标处于其状态的位置，可以通过prev（）/ next（）的方法对其进行修改
解决方案3
1 2013-01-08 13:39:59
我的版本演示
删除onclicks并将其放在头部
更改演出以完成您需要的功能
的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();
}
解决方案4
1 已采纳 2013-01-08 13:41:25
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>
解决方案5
0 2013-01-08 13:38:00
遵循此代码
进行的更改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>
解决方案6
0 2013-01-09 06:34:14
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;
}
}
我使用了一个单独的函数来修改全局变量。 我也是从上述解决方案中得到的想法。
谢谢，安吉。
Javascript 下一张和上一张图片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.