單擊循環通過一個數組

我想知道如何循環點擊數組中的值？當顯示數組的最後一個值時，下一次單擊應該再次顯示數組的第一個值。單擊循環通過一個數組

我認爲我很接近，但是當我到達數組的最後一個值時，我必須再次單擊兩次，然後再次顯示第一個值。

這裏是我的JavaScript：

var myArray = ["red", "yellow", "green"]; 
var myIndex = 1; 
var print = document.getElementById('print'); 

print.innerHTML = myArray[0]; //Print first value of array right away. 

function nextElement() { 
    if (myIndex < myArray.length) { 
    print.innerHTML = myArray[myIndex]; 
    myIndex++; 
    } 
    else { 
    myIndex = 0; 
    } 
};

這裏是我的HTML：

<p>The color is <span id="print"></span>.</p> 

<a id="click" href="#" onclick="nextElement();">Click</a>

這裏有一個小提琴，如果這是有幫助的：

http://jsfiddle.net/jBJ3B/

來源

2013-06-20 Mdd

你可以使用模這樣的運營商：

function nextElement() { 
    print.innerHTML = myArray[myIndex]; 
    myIndex = (myIndex+1)%(myArray.length); 
    } 
};

參見：http://jsfiddle.net/jBJ3B/3/

更極端的是（如zdyn寫）：

function nextElement() { 
    print.innerHTML = myArray[myIndex++%myArray.length]; 
};

參見：http://jsfiddle.net/jBJ3B/5/

來源

2013-06-20 01:15:34

謝謝。我猜我是因爲myArray.length返回值3而被拋出的，但是myArray的最後一個位置是2.謝謝！ – Mdd

儘量精簡，我能得到它：

function nextElement() { 
    print.innerHTML = myArray[myIndex++ % myArray.length] 
}

來源

2013-06-20 01:19:27 zdyn

謝謝！這真的很酷。 – Mdd

var print = document.getElementById（'print'）;

你爲什麼給這個分配一個變量？爲什麼不只寫

document.getElementById（'print'）。innerHTML = myArray [0]; //立即打印數組的第一個值。 document.getElementById（'print'）。style.color = myArray [0]; //設置id打印的顏色。

來源

2017-01-26 03:54:59

因爲比我只需鍵入'document.getElementById（'print'）'一次。我認爲將它分配給一個變量也會緩存對DOM元素的引用，所以它不必被查找。 – Mdd

單擊循環通過一個數組

回答

相關問題