如何通過每次點擊挑選一個數組的新索引

Question

我有一個函數，它包含一個顏色數組，並且有一個按鈕和一個文本標籤。因此，每次單擊後，該函數將獲取數組的當前索引，並在文本中顯示該索引，並向索引號中添加一個，以便下次顯示下一個索引。

這裏是我的代碼：

var mycolor = 0; 

var color = function() { 
    var list = ["red", "blue", "green"];  
    return list[mycolor]; 
    mycolor++; 
}; 

function run(){ 
    $(".demo").text(color()); 
} 

JSFIDDLE

任何想法？如何解決它？目前它只顯示第一個索引，它不更新它的變量。

Answer 1

這是

var mycolor = 0; 
 
var maxcolor = 0 
 
var color = function() { 
 
    var list = ["red", "blue", "green"];  
 
    maxcolor = list.length; 
 
    if((mycolor + 1) > maxcolor) 
 
    { 
 
     mycolor = 0 
 
    } 
 
    return list[mycolor++]; 
 
    
 
}; 
 

 
function run(){ 
 
    $(".demo").text(color()); 
 
}

無限的版本。

Answer 2

你的回報爲時尚早。當mycolor超過數組長度時，您還需要處理。

var color = function() { 
    var list = ["red", "blue", "green"];  

    if (mycolor >= list.length) 
     mycolor = 0; 

    return list[mycolor++]; 
}; 

寫上面會是以下的一種替代方法：

var color = function() { 
    var list = ["red", "blue", "green"];  
    return list[mycolor++ % list.length]; 
}; 

function run(){ 
    $(".demo").text(color()); 
} 

Answer 3

您遞增後的回報，保證不被執行的代碼。

嘗試類似...

var color = function() { 
    var list = ["red", "blue", "green"];  
    return list[mycolor++]; 
}; 

它返回號碼，然後遞增它。你應該做% list.length來調用超出你數組的長度將會包裝結果，而不是返回undefined（除非當然，這是你想要的）。

Answer 4

這個怎麼樣：因爲你增加它，你已經從函數返回後

var mycolor = 0; 
var list = ["red", "blue", "green"]; 

var color = function() { 
    return list[mycolor]; 
}; 

function run(){ 
    $(".demo").text(color()); 
    mycolor++; 
    if(mycolor > 2) { 
     mycolor = 0; 
    } 
} 

mycolor是沒有得到更新。

Answer 5

This is the only one that will work because it's the only code that includes a click event. 

var mycolor = 0; 
var maxcolor = 0 
var color = function() { 
    var list = ["red", "blue", "green"];  
    maxcolor = list.length; 
    if((mycolor + 1) > maxcolor) 
    { 
     mycolor = 0 
    } 
    return list[mycolor++]; 

}; 

$(".demo").text('on', 'click', color());