javascript - 试图将 div 从一个数组移动到另外两个数组

Question

在一个游戏项目上工作，我正在尝试创建一个 onclick 事件，将 .character div 从一个数组移动到另外两个数组。我正在尝试移动最多 4 个字符。由于它是两个独立的屏幕，我可以从字符数组过渡到派对数组，然后将派对移动到 inCombat 数组。我正在使用带有 javascript 的 jQuery。代码现在一团糟，但我会告诉你我有什么。

HTML：

<section id="team-character-select">
            <p class="select-button-contain"><button id="char-select">Char Select</button></p>
            <article id="selected-characters"></article>
        </section>

        <section id="combat-arena">
            <article id="player-section">
                <div class="player-characters" id="attacker-one"></div>
                <div class="player-characters" id="attacker-two"></div>
                <div class="player-characters" id="attacker-three"></div>
                <div class="player-characters" id="attacker-four"></div>
            </article>

JS：

var characters = {
    "Guy1": {
            name: "Guy1",
            health: 120,
            attack: 8
        }
};

    var attacker1;
    var attacker2;
    var attacker3;
    var attacker4;

    var party = ["", "", "", ""]; // 4
    var unUsed = [];

var renderCharacter = function (character, renderArea) {
        // this block of code builds the character card, and renders it to the page.
        var charDiv = $("<div class='character' data-name='" + character.name + "'>");
        var charName = $("<div class='character-name'>").text(character.name);
        var charImage = $("<img alt='image' class='character-image'>").attr("src", character.imageUrl);
        var charHealth = $("<div class='character-health'>").text(character.health);
        charDiv.append(charName).append(charImage).append(charHealth);
        $(renderArea).append(charDiv);

    };

    var initializeGame = function () {
        $("#start-game").click(function () {
            // Loop through the characters object and call the renderCharacter function on each character to render their card
            for (var key in characters) {
                renderCharacter(characters[key], "#team-character-select");
            }
        }, )
    };


    initializeGame();



    $(".character").click(function () {
        party.push(".character");
        document.getElementById("#selected-characters").innerHTML = party;
        console.log(party);
    });

标签： javascriptjquery