JavaScript for循環僅顯示最後一個點擊div時

Question

我有幾個顯示顏色的div。當我點擊一個div時，它沒有顯示正確的顏色。它顯示只有最後一種顏色＃000000

var color = ["#003366", "#336699", "#3366CC", "#003399", "#000099", "#0000CC", "#666666", "#333333", "#000000"]; 
var i = 0; 
for (; color[i];) { 
    var theme = "#theme" + i; 
    var text = color[i]; 
    $(theme).click(function() { 
     $("#title_content").css('background-image', ''); 
     $("#content_text").css('background-image', ''); 
     $("#title_content").css('background-color', text); 
     $("#content_text").css('background-color', text); 
    }); 
    i++; 
} 

Answer 1

可以關聯使用.data()以後可以獲取元素的顏色。

下面是一個示例，其中我添加了一個通用類以將其用作選擇器。

var color = ["#003366", "#336699", "#3366CC", "#003399", "#000099", "#0000CC", "#666666", "#333333", "#000000"]; 

for (var i = 0; i < color.length;i++) { 
    $("#theme" + i) 
    .addClass('selectorClass') //Add class for binding event 
    .data('color', color[i]); //Associate color with element   
} 


//Bind Event 
$('.selectorClass').click(function() { 
    $("#title_content").css('background-image', ''); 
    $("#content_text").css('background-image', ''); 

    //Fetch the color using this 
    var text = $(this).data('color'); 
    $("#title_content").css('background-color', text); 
    $("#content_text").css('background-color', text); 
});