如何添加可變顏色以跨度文本

Question

我有一個跨度，每次用戶點擊一個按鈕時都會更改一些文本。我需要它的顏色來改變每一個clic（我有這樣的數組中的顏色：var colorArray = [「紅色」，「藍色」，「紅色」，「紅色」，「綠色」，「藍色」， 「綠色」，「紅色」]）

陣列沒有固定，因爲我從數據庫讀取它。

如何通過JavaScript做任何想法（這是對的PhoneGap項目）

Answer 1

每當你點擊按鈕，你可以把你的數組的第一個元素，並把它放在它的末尾，所以它是一個循環。

與jQuery .css()功能後，你可以把數組的第一個顏色，你span。

代碼應該是這樣的：

var colorArray = ["red","blue","green"]; 
$('button').click(function(){ 
    $('span').css({"color":colorArray[0]}); 
    colorArray.push(colorArray.shift()); 
}); 

See this Fiddle for more details

Answer 2

您可以使用jQuery和CSS（）函數。請查看http://api.jquery.com/css/#css2的此功能文檔（網站末尾還有一些示例）。最後，你將有這樣的事情：

$("span#id").css("color", target_color); 

而不是span#id你必須使用CSS選擇器爲目標<span>元素和target_color必須是你的陣列的顏色，你要使用。

Answer 3

如果你想純JS這裏是js代碼：

<script> 
    var color = { 
    currentColor: 0, 
    colorArray: ["red","blue","red","red","green","blue","green","red","orange"], 
    changeColor: function(){ 
     document.getElementById('span1').style.color = color.colorArray[color.currentColor]; 
     if (color.currentColor < color.colorArray.length-1){ 
     color.currentColor++; 
     }else{ 
     color.currentColor = 0; 
     } 
    } 
    }; 
</script> 

這裏IR您的HTML：

<input type="button" value="change color" onclick="color.changeColor()"> 

<span id="span1"></span>