javascript - javascript for循环在单击div时仅显示最后一个

This question already has answers here:

JavaScript closure inside loops – simple practical example
                            
                                （44个答案）
                            
                    
                5年前关闭。
        

    

我有几个显示颜色的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++;
}

最佳答案

您可以使用.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);
});