2

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>

同じ要素が繰り返され続けます。

アンキット

4

6 に答える 6

4

問題は、getNext および getPrevious 関数に という名前のパラメーターがありcurrentItemIndex、維持されているインデックス カウンターとして使用しようとしているグローバル変数と一致することです。これは整数なので、参照ではなく値で渡されます。

このため、currentItemIndex++またはcurrentItemIndex--を実行すると、グローバル変数ではなく、パラメーター変数の値が変更されます。

グローバル変数の名前と関数の末尾にある対応するインクリメント/デクリメント行を一致するように変更するか、これら 2 つの関数のパラメーターの名前と最初の行を一致するように変更します。

于 2013-01-08T13:37:17.033 に答える
2

私のバージョンのデモ

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();
}
于 2013-01-08T13:39:59.743 に答える
2

関数 getPrevious()/getNext() の currentItemIndex は、変数/参照ではなく、値によって渡されます。これらの関数内の currentItemIndex への変更は、関数の終了時に渡す実際のパラメーターには反映されません。

典型的な代替手段には、次のいずれかが含まれます。

  • 関数 return を使用して、次または前のインデックス値を、これらの関数を呼び出すコード内の代入と共に返します。また
  • リストとカーソルを組み込んだオブジェクトを作成し、カーソルの位置をその状態で記録します。これは、prev()/next() のメソッドによって変更できます。
于 2013-01-08T13:37:00.710 に答える
1 
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>
于 2013-01-08T13:41:25.457 に答える
0

このコードに従ってください

変更点 1)onclick="getPrevious()" onclick="getNext()"グローバルとして宣言されているため、引数を渡す必要はありません。2)関数の開始時にcurrentItemIndex++;and を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>
于 2013-01-08T13:38:00.737 に答える
0 
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;
                    }
        }

グローバル変数を変更するために別の関数を使用しました。上記のソリューションからもアイデアを得ました。

ありがとう、アンキット。

于 2013-01-09T06:34:14.403 に答える