Question

更新：我解决了问题，但我不确定它为什么会起作用。问题是我在我的onlick功能中为＆＃34;攻击＆＃34;创建了重置按钮。按钮。但是，我的复位按钮的onlick功能超出了它所用的功能。为什么按钮在它所在的功能之外没有响应？

我有一个游戏，玩家从4个角色中选择，他们都有类名charContainer。在玩家选择一个角色后，我使用.each对列表进行迭代以删除班级charContainer，并将班级foes添加到未被选中的每个角色中。获取新foes类的这些字符将附加到ID为enemies的div中。然后玩家一次选择一个敌人进行战斗，直到他/她失去所有健康值或击败所有可用的敌人。

问题是，在满足其中一个条件后，我使用jquery创建一个按钮并给它一个id resetButton。当该按钮显示在DOM中并且我单击它时，我尝试选择具有类foes的所有div并再次添加类charContainer，然后将其附加到原始容器。单击重置按钮时，此功能无效。在浏览器控制台中，显示单击按钮后未添加类charContainer。

    $('.charContainer').on('click', function(){

    $('#your').append($(this));
    if(firstRound == true) 
    {
        damage = $('#your .charContainer').data('attack');
        playerHP = $('#your .charContainer').data('hpp');
    }

    console.log('before', this);
    $('.characters>.charContainer').each(function(){
        $(this).removeClass('charContainer').addClass('foes');
        $('#enemies').append($(this));
    })
    if($(this).hasClass('foes'))
    {
        $('#fighter').append($(this));
        console.log('after', this)
        counter = $('#fighter .foes').data('cattack');
        enemyHP = $('#fighter .foes').data('hpp');
    }

    })

    $('#attack').on('click', function(){
    if($('#your .charContainer').length &&  $('#fighter .foes').length)
    {

        playerHP -= counter;
        console.log(playerHP);
        console.log('damage', damage);
        enemyHP -= damage;
        $('.charContainer .health').html(playerHP);
        $('#fighter .foes .health').html(enemyHP); 
        $('.oppName').remove();
        $('.oppName2').remove();
        var newH2 = $('<h2>').addClass('oppName');
        var newH22 = $('<h2>').addClass('oppName2');
        $('.FightProgress').append(newH2);
        $('.FightProgress').append(newH22);
        $('.oppName').html('You attacked ' + $('#fighter .foes').data('name') + ' for ' + damage + ' damage!');
        $('.oppName2').html($('#fighter .foes').data('name') + ' attacked you back for ' + counter + ' damage!');
        damage += 8;
        console.log(enemyHP);
        console.log('cdamage', counter);

        if(playerHP <= 0)
        {
            $('.lose').html(lose);
            var gameReset = $('<button>' + 'Play Again?' + '</button>').attr('id', 'resetButton'); 
            $('.lose').append(gameReset);
        }
        else if(playerHP > 0 && enemyHP <= 0)
        {
            firstRound = false;
            $('#fighter>.foes').hide();
            $('.oppName2').remove();
            $('.oppName').html('You have defeated ' + $('#fighter .foes').data('name') + ' , select another opponent.')
            $('#fighter>.foes').remove();
        }
        }

        })

        $('#resetButton').on('click', function(){
        // $('.characters').append('.charContainer');
        // $('.foes').each(function(){
        $('.foes').addClass('charContainer');
        // $('.characters').append('.charContainer');
        // })
        // if($('#fighter .foes').length == true)
        // {
        //  $('#fighter .foes').addClass('charContainer').removeClass('foes')
        // }
        // $('.characters').append('.charContainer');
        })

Answer 1

您可以选择"#your > .charContaine, .foes"使用.appendTo()将元素附加到.characters元素;以.removeClass()为参数的"foes" .addClass()，其中"charContainer"为参数。

根据@ Answer Append divs to another div after its has already been appended to a div处的@Makyen建议使用活动委派。在$(document).on('click', '.charContainer:not(#your > .charContainer)'，$('#enemies').on('click', ".foes"

$(document).ready(function() {
  $(document).on('click'
  , '.charContainer:not(#your > .charContainer)'
  , function(e) {
    $("#your").append(this);
    $('.characters>.charContainer')
      .each(function() {
        $(this).removeClass('charContainer')
          .addClass('foes');
        $('#enemies').append(this);
      })
  })

  $('#enemies').on('click', ".foes", function() {
    $('#opponent').append($(this));
    $(this).addClass('defender');
  });

  $("#resetButton").on("click", function() {
    $("#your > .charContainer, .foes")
      .appendTo(".characters")
      .removeClass("foes")
    .addClass("charContainer")
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="resetButton">
  reset
</button>
<div class="characters">
  <div class="charContainer darth">
    <h2 id="c1"></h2>
    <img class="vade" alt="vader">
    <p id="c1hp" data-hp="120"></p>
  </div>
  <div class="charContainer luke">
    <h2 id="c2"></h2>
    <img class="skywalker" alt="luke">
    <p id="c2hp" data-hp="100"></p>
  </div>
  <div class="charContainer won">
    <h2 id="c3"></h2>
    <img class="obi" alt="obiwan">
    <p id="c3hp" data-hp="150"></p>
  </div>
  <div class="charContainer maul">
    <h2 id="c4"></h2>
    <img class="dmaul" alt="maul">
    <p id="c4hp" data-hp="180"></p>
  </div>
</div>
<div id="your">
  <h2>Your Character</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
  <h2>Enemies</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="fightSection">
  <h2>Fight Section</h2>
  <button id="attack" class="attk">
    <h1>Attack</h1>
  </button>
</div>
<div id="opponent">
  <h2>Opponent</h2>
  <!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>

Answer 2

我想你需要做这样的事情：

工作小提琴：JSFiddle

$('.foes').each(function(){
        $(this).removeClass('foes').addClass('charContainer');
        //part where you add them back to original container
        $(this).appendTo('.orginalContainerClass');
});

您必须使用foes类对每个元素进行迭代，然后删除foes类，并在点击charContainer时添加resetButton类。

我会帮忙的。

需要将div添加回原始位置

2 个答案: