javascript - 将数组名称添加到字符串并更新 - javascript

Question

我正在尝试创建一个函数，该函数将继续以这种格式将选定的颜色 ID 添加到我的 #storage_disply:

var name_of_array = ["#xxxxxx", "#xxxxxx", 等等]

<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">

$(document).ready(function() {



var selected_color = [];
var ids = [];
var black_colors = [];
var blue_colors = [];
var brown_colors = [];
var gray_colors = [];
var green_colors = [];
var orange_colors = [];
var pink_colors = [];
var purple_colors = [];
var red_colors = [];
var teal_colors = [];
var white_colors = [];
var yellow_colors = [];

    $(".color_cell").click(function(){
        // ADD MY COLOR TO SELECTED COLOR'S ARRAY       
        selected_color.push($(this).attr("id"));
        console.log($(this).attr("id"));
        $(this).css({'background-color':'white'});
        $(this).unbind('click');
        updateDisplay(selected_color);
    });



    $(".btnColor").click(function(){
         // MAKE SELECTED COLOR BE ME
        if ($(this).attr("id") == "black") {
            selected_color = black_colors;
        }
        else if ($(this).attr("id") == "blue") {
            selected_color = blue_colors;
        }
        else if ($(this).attr("id") == "brown") {
            selected_color = brown_colors;
        }
        else if ($(this).attr("id") == "gray") {
            selected_color = gray_colors;
        }
        else if ($(this).attr("id") == "green") {
            selected_color = green_colors;
        }       
        else if ($(this).attr("id") == "orange") {
            selected_color = orange_colors;
        }
        else if ($(this).attr("id") == "pink") {
            selected_color = pink_colors;
        }
        else if ($(this).attr("id") == "purple") {
            selected_color = purple_colors;
        }
        else if ($(this).attr("id") == "red") {
            selected_color = red_colors;
        }
        else if ($(this).attr("id") == "teal") {
            selected_color = teal_colors;
        }
        else if ($(this).attr("id") == "white") {
            selected_color = white_colors;
        }
        else if ($(this).attr("id") == "yellow") {
            selected_color = yellow_colors;
        }
        }); // end button handler
    }); // end ready()

function updateDisplay(colors) {

        jQuery.each(colors, function(key, value) {


        //var test_colors = ["#000000", "#FFFFFF"];
        //display var
        $("#storage_display").html("var "+$("#storage_display").html()+" " +value);

   });

}

</script>
<br>
<br>
    <button type="button" class="btnColor" id="black">Black</button>&nbsp;
    <button type="button" class="btnColor" id="blue">Blue</button>&nbsp;
    <button type="button" class="btnColor" id="brown">Brown</button>&nbsp;
    <button type="button" class="btnColor" id="gray">Gray</button>&nbsp;
    <button type="button" class="btnColor" id="green">Green</button>&nbsp;
    <button type="button" class="btnColor" id="orange">Orange</button>&nbsp;
    <button type="button" class="btnColor" id="pink">Pink</button>&nbsp;
    <button type="button" class="btnColor" id="purple">Purple</button>&nbsp;
    <button type="button" class="btnColor" id="red">Red</button>&nbsp;
    <button type="button" class="btnColor" id="teal">Teal</button>&nbsp;
    <button type="button" class="btnColor" id="white">White</button>&nbsp;
    <button type="button" class="btnColor" id="yellow">Yellow</button>&nbsp; 

到目前为止，它显示:var var var var var var 6010b0 6010b0 9010b0 6010b0 9010b0 f010b0

我对此很陌生，我不明白如何将数组名称放入字符串中。

提前致谢!

Answer 1

无需循环。只需加入数组并在需要的地方添加一些额外的字符串即可:

function updateDisplay(colors) {
    var allColors = "\"#" + colors.join("\", \"#") + "\"";
    $("#storage_display").html("var name_of_array = [" + allColors + "]");
}

编辑:要自定义数组名称，请将 this.id 传递给 updateDisplay():

$(".color_cell").one("click", function() {
    selected_color.push(this.id);
    $(this).css({'background-color':'white'});
    updateDisplay(selected_color, this.id);
});

function updateDisplay(colors, name) {
    var allColors = "\"#" + colors.join("\", \"#") + "\"";
    $("#storage_display").html("var " + name + "_colors = [" + allColors + "]");
}