クリックイベントやDOM操作に問題があります

Question

私はstartgame関数で4文字を生成してこれを開始し、それらをCharacter Divに送りました。それから4（vader、stormtrooper、luke、yoda）のいずれかをクリックする必要があります。私が4のうちの1つをクリックすると、もう1つはそのDivから移動してenemiesavailable divに移動します。私がクリックしたものはキャラクター部にとどまります。私はこれを達成する方法を理解できません。私は4週間しかコーディングしていません。私のコードは

$(".character").click(function() { 
      $(this).remove(); 
      $(this).appendTo(".enemiesavailable") 
     }); 

しかし、あなたはstartgame()機能

JSフィドル内のクリックハンドラを添付してください...

var characters = [{ 
 
    name: "DarthVader", 
 
    health: 120, 
 
    attack: 8, 
 
    enemyattackback: 15, 
 
    imgURL: "assests/images/darth_vader.jpg" 
 
    }, 
 

 
    { 
 
    name: "StormTrooper", 
 
    health: 100, 
 
    attack: 14, 
 
    enemyattackback: 5, 
 
    imgURL: "assests/images/stormtrooper.jpg" 
 
    }, 
 

 
    { 
 
    name: "LukeSkywalker", 
 
    health: 150, 
 
    attack: 8, 
 
    enemyattackback: 20, 
 
    imgURL: "assests/images/Luke_Skywalker.jpg" 
 

 
    }, 
 

 
    { 
 
    name: "Yoda", 
 
    health: 180, 
 
    attack: 7, 
 
    enemyattackback: 20, 
 
    imgURL: "assests/images/yoda.jpg" 
 
    } 
 
]; 
 
var selectedCharacter; 
 
var enemys = []; 
 
var figheter; 
 

 

 
// start the game with a loop that sends the 4 character in the object to a div 
 
$(document).ready(function() { 
 

 
    function startgame() { 
 
    $.each(characters, function(index, character) { 
 
     var characterDiv = $('<div>').addClass('character'); 
 
     var characterName = $('<p>').addClass("character-name").text(character.name); 
 
     var characterImg = $("<img>").addClass("character-img").attr('src', 
 
     character.imgURL);; 
 
     var characterHealth = $('<p>').addClass('character-health').text(character.health); 
 
     characterDiv.append(characterName, characterImg, characterHealth).appendTo('.Character') 
 
    }) 
 
    } 
 
    startgame() 
 

 

 
    function selectchar() { 
 
    $('.Character').click(function() { 
 
     console.log("hi") 
 
    }); 
 
    } 
 

 
});

<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
 
<link href="http://fonts.googleapis.com/css?family=Corben:bold" rel="stylesheet" type="text/css"> 
 
<link href="http://fonts.googleapis.com/css?family=Nobile" rel="stylesheet" type="text/css"> 
 
<link rel="stylesheet" type="text/css" href="assests/css/style.css"> 
 
<link rel="stylesheet" type="text/css" href="assests/css/reset.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="row"> 
 
    <div class="col-md-10"> 
 
    <div class="page header"> 
 
     <div class="pull-right"> 
 
     <h1><strong>Star Wars RPG</strong></h1> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="Character"> 
 
     <div class="col-md-4"> 
 
     <h2><strong>Your Character</strong></h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <div class="row"> 
 
    <div class="enemiesavailable"> 
 
     <div class="col-md-6" id="attack"> 
 
     <h3>Enemies Available to Attack</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="fighter"> 
 
     <div class="col-md-6" id="fight"> 
 
     <h4>Fight Section</h4> 
 
     <button type="button" class="btn btn-primary btn-xs">attack</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <h5>Defender</h5> 
 
    </div> 
 
    </div>

Answer 1

あなたはこのような何かを試みることができるですここ：https://jsfiddle.net/

もちろん、characters配列から選択された文字をenemies配列に移動する問題は解決しませんが、dom操作の側面を扱います。

添付されているクラスは.character

だったのに対し、元のコード内のクリックハンドラは、大文字のCで .Characterを参照したことは注目する価値があるかもしれません