有点击事件的问题，然后是 dom 操作答案

【问题标题】：having trouble with a click event then a dom manipulation有点击事件的问题，然后是 dom 操作
【发布时间】：2017-07-15 04:53:44
【问题描述】：

我首先在我的 startgame 函数中生成 4 个字符并将它们发送到我的 Character Div。然后我需要单击 4 个（vader、stormtrooper、luke 或 yoda）之一。当我单击 4 个中的一个时。其他 3 个将从该 Div 移动并转到敌人可用的 div。而我点击的那个将留在 Character Div 中。我不知道如何做到这一点。我只编码了 4 周。我的代码是

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>

【问题讨论】：

标签： jquery html json dom

【解决方案1】：

你可以试试这样的...

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

但请确保在 startgame() 函数中附加点击处理程序

这里是 JS 小提琴：https://jsfiddle.net/

这当然不能解决从 characters 数组中选择的字符移动到 enemies 数组的问题，但它处理的是 dom 操作方面。

可能值得注意的是，原始代码中的点击处理程序使用大写 C 引用 .Character，而附加的类是 .character

【讨论】：