Добавление имен массивов в строку и обновление - javascript

Question

Я пытаюсь создать функцию, которая продолжит добавлять выбранные идентификаторы цветов в мой #storage_disply в следующем формате:

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

<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 + "]");
}

Answer 2

Попробуйте это:

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

join объединит элементы в вашем массиве, разделенные параметром, который вы передаете ему. Не нужно зацикливаться самостоятельно.