遇到点击事件，然后dom操作有困难

我开始通过在我的startgame函数中生成4个字符，并将它们发送到我的字符部。然后，我需要点击其中一个（维德，冲锋队，卢克或尤达）。当我点击其中一个4.其他3将从该部门移动到敌人可用div。虽然我点击的那个将留在角色分区。我无法弄清楚如何做到这一点。我只有4个星期的编码。我的代码是遇到点击事件，然后dom操作有困难

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>

来源

2017-02-24 willis

你可以尝试这样的事情......

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

但要确保你附加startgame()功能

JS小提琴里面点击处理程序here：https://jsfiddle.net/

这当然不能解决从characters阵列中选择的字符移动到enemies阵列的问题，但它涉及dom操纵方面。

可能是值得一提的是，在原密码点击处理程序引用.Character以大写Ç，而类附着是.character

来源

2017-02-24 11:45:23 jimikara

遇到点击事件，然后dom操作有困难

回答

相关问题