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);
});

javascript for循环只显示最后一个点击div

1 个答案: