對象jQuery中的數組訪問元素

我想用一種顏色填充畫布，該顏色是對象內數組的一個元素，元素索引應該是i但代碼似乎是錯誤的。 color1中的變量已經聲明，並且包含一個字符串，該字符串是該顏色的十六進制值。對象jQuery中的數組訪問元素

var colorsObj = { 
    color1: [orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin] 
} 

function drawCanvas(color) { 
    for(var i = 1; i < 10; i++){ 
    $('.app').append('<canvas class="shadescolors" id="shade'+i+'" width="100" height="100">'); 
    var canvas = document.getElementById('shade'+i); 
    var context = canvas.getContext('2d'); 

    canvas.width = window.innerWidth/3; 
    cc = canvas.width; 
    radius = cc/2-10; 
    canvas.height = canvas.width; 
    context.beginPath(); 
    context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true); 
    alert(colorsObj.color[i]); 
    context.fillStyle = colorsObj.color[i]; 
    context.fill(); 
    context.lineWidth = 2; 
    context.strokeStyle = '#8A8A8A'; 
    context.stroke(); 
    } 
} 

drawCanvas('color1');

警報也不會觸發。

來源

2015-04-25 Cress

'colorsObj.color'是不一樣'colorsObj.color1'。 – PHPglue

你的顏色對象有一個屬性，它是一個名爲'color1'的數組。您正嘗試訪問不存在的名爲'color'的數組的索引。其次，你的數組包含一堆可能都未定義的值。我認爲你的意思是讓它們成爲字符串'colors：['orange，'amber'... etc]'因爲你正在向你的'drawCanvas'函數傳遞一個字符串，它看起來像你試圖訪問colorObjects數組，但是你使用錯誤的語法。 'colorObj ['color1']'會起作用。但我認爲你有這個錯誤，你可能想查找JavaScript對象和數組 – azium

你應該使用瀏覽器控制檯（F12）來查看JavaScript錯誤，以幫助你找出可能導致錯誤的原因。 – azium

這裏的主要問題是，你需要使用colorObj[color]讓你的顏色列表，而不是colorObj.color，因爲要使用color變量的值以選擇colorObj內的特定顏色列表。（我假設你以後可能有color2條目中colorObj，等等，對嗎？）

而且你通過啓動1你的循環缺少的顏色列表中的第一個元素，而10循環限制應該使用顏色列表的.length而不是硬編碼。

你一對夫婦循環內的變量缺少var，因爲你設置cc，canvas.width，並且canvas.height都爲相同的值，你不妨做一切在一個聲明。

作爲一個簡化提示，沒有必要給你的canvas元素一個連續的ID，並使用getElementById()找到它。相反，您可以在創建它時只保存對該元素的引用，然後使用它。

我還在canvas元素的HTML代碼中取出width=和height=;由於您在代碼中設置寬度和高度，因此它們是多餘的。

最後，請縮進您的代碼！ :-)

所以，你可以嘗試這樣的事：

var colorsObj = { 
    color1: [ orange,amber,apricot,tangerine,bittersweet,persimmon,salmon,peach,pumpkin ] 
} 

function drawCanvas(color) { 
    var colorList = colorsObj[color]; 
    for(var i = 0; i < colorList.length; i++) { 
     var $canvas = $('<canvas class="shadescolors">').appendTo('.app'); 
     var canvas = $canvas[0]; 
     var context = canvas.getContext('2d'); 

     var cc = canvas.width = canvas.height = window.innerWidth/3; 
     var radius = cc/2-10; 
     context.beginPath(); 
     context.arc(cc/2, cc/2, cc/2-10, 0, Math.PI*2, true); 
     context.fillStyle = colorsList[i]; 
     context.fill(); 
     context.lineWidth = 2; 
     context.strokeStyle = '#8A8A8A'; 
     context.stroke(); 
    } 
} 

drawCanvas('color1');

來源

2015-04-25 23:10:10

color1數組字符串或其他變量中的值？如果他們是字符串，這應該是：

color1: ['orange','amber','apricot','tangerine','bittersweet','persimmon','salmon','peach','pumpkin']

記住數組中的第一個元素的索引0，所以解決您的for循環，我會做：

for(var i = 0; i < colorsObj.color1.length; i++)

還有一個錯誤的在您使用alert(colorsObj.color[i]);代替alert(colorsObj.color1[i]);（COLOR1，不變色）警告聲明

來源

2015-04-25 23:05:39

最重要的是，'drawCanvas'函數帶有一個顏色參數，它並不真正被使用，而是錯誤數組的名稱是額外令人困惑的事情。 – azium

對象jQuery中的數組訪問元素

回答

相關問題