Question

我通过在startgame函数中生成4个字符并将它们发送到我的Character Div来开始。然后我需要点击其中一个（vader，stormtrooper，luke或yoda）。当我点击其中一个4.其他3将从该Div移动并转到enemiesavailable 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>

Answer 1

你可以试试这样的......

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

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

中

JS小提琴：https://jsfiddle.net/

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

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

遇到点击事件的麻烦然后是dom操纵

1 个答案: