Question

我的程序是一个游戏，以4个可玩角色开头，每个角色都在自己的div中，类charContainer，这4个div位于类character的容器中。当玩家通过点击它们来挑选角色时，它会将其移动到具有等级your的容器。之后，容器characters中剩余的未选择字符将移动到另一个名为enemies的div容器。这个div将剩下3个未被点击的div移动到它。在此之后，玩家选择一个对手。我试图将选定的对手移动到名为opponent的div容器，但它会不断附加到your容器。我尝试删除了类名charContainer并添加了类foes，但仍然无效。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
  <div class="charContainer darth">
    <h2 id="c1"></h2>
    <img class="vade" src="assets/images/vader.jpg">
    <p id="c1hp" data-hp="120"></p>
  </div>
  <div class="charContainer luke">
    <h2 id="c2"></h2>
    <img class="skywalker" src="assets/images/luke.jpg">
    <p id="c2hp" data-hp="100"></p>
  </div>
  <div class="charContainer won">
    <h2 id="c3"></h2>
    <img class="obi" src="assets/images/obiwan.jpg">
    <p id="c3hp" data-hp="150"></p>
  </div>
  <div class="charContainer maul">
    <h2 id="c4"></h2>
    <img class="dmaul" src="assets/images/maul.png">
    <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>

删除charContainer课程并添加foes课程后，onclick的{{1}}函数仍会将其发送到foes div，即使我有摆脱your。我需要它去charContainer div。

Answer 1

致电.off("click")

$(".characters>.charContainer").off("click")

在.characters>.charContainer click处理程序中

从click元素中分离.charContainer。

如果只有一个.one()元素应附加到#enemies元素，则在.foes元素使用事件委派{1}}

#opponenent

将$('#enemies').one('click', ".foes", function() {})附加到click元素，以便在点击动态添加#enemies className的元素时调用处理程序

foes

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

Answer 2

主要问题是您要将“字符”click事件监听器添加到每个实际<div class="charContainer">代码中：

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

然后，一旦你将charContainer div移动到enemies，那些事件监听器仍然在charContainer div上。因此，当您单击其中一个时，它会移动到your div。您可以通过在每个div上使用.off('click')删除侦听器或使用事件委派来解决此问题。在下面的代码中，我选择了事件委派。

此外，您尝试在添加其他侦听器后立即向任何.foes添加侦听器，但在用户单击任何内容之前。当时的代码：

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

已执行，文档中没有任何内容与选择器'.foes'匹配。因此，没有添加任何事件监听器。

为了解决这个问题，我改变了：

在您的HTML中：

<div class="characters">

到

<div id="characters">

您正在使用characters来唯一标识该特定div，而不是对一个或多个元素进行分组。因此，对于您使用它的方式，characters更适合id而不是class。

在JavaScript中，主要更改是将事件侦听器更改为容器div元素，但仅在元素与选择器'.charContainer'匹配时才执行处理程序。例如，

$('#characters').on('click', '.charContainer', function(e) {...

将click事件处理程序添加到与选择器'#characters'匹配的所有元素。这是包含您从your字符中选择的字符的div。 .on()的第二个参数告诉jQuery仅在事件目标（e.target）与选择器.charContainer匹配时才执行处理程序。

您的其他事件处理程序，foes，我更改为：

$('#enemies').on('click', '.foes', function(e) {

与characters侦听器一样，它使用事件委派在<div id="enemies">上拥有此事件侦听器，但仅在事件目标与选择器'.foes'匹配时才执行处理程序。

当您使用它来引用事件的目标时，我还在您的事件处理程序中将this更改为e.target。虽然你的使用很好，但是当在事件处理程序中使用函数来改变this（.each()的值，这里）时，我发现使用显式事件目标，提供了更易于维护的代码。

$(document).ready(function() {
  $('#characters').on('click', '.charContainer', function(e) {
    $('#your').append(e.target);
    $('#characters>.charContainer').each(function() {
      $(this).removeClass('charContainer').addClass('foes');
      $('#enemies').append($(this));
    })
    $('#characters').remove();
  })

  $('#enemies').on('click', '.foes', function(e) {
    $('#opponent').append(e.target);
    $(e.target).addClass('defender');
    $('#enemies').remove(); //Added this to match action on picking character.
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="characters">
  <!-- Added  style="display: inline-block;" to characters because that looks
       better in a snippet-->
  <div class="charContainer darth" style="display: inline-block;">
    <h2 id="c1"></h2>
    <img class="vade" src="http://i.stack.imgur.com/jy5g5.png">
    <p id="c1hp" data-hp="120"></p>
  </div>
  <div class="charContainer luke" style="display: inline-block;">
    <h2 id="c2"></h2>
    <img class="skywalker" src="http://i.stack.imgur.com/X7VCH.png">
    <p id="c2hp" data-hp="100"></p>
  </div>
  <div class="charContainer won" style="display: inline-block;">
    <h2 id="c3"></h2>
    <img class="obi" src="http://i.stack.imgur.com/oOUwX.png">
    <p id="c3hp" data-hp="150"></p>
  </div>
  <div class="charContainer maul" style="display: inline-block;">
    <h2 id="c4"></h2>
    <img class="dmaul" src="http://i.stack.imgur.com/wRMuO.png">
    <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 3

我并不是说这是产生所需结果的最有效方法，但代码获得所需结果所需的最小更改次数是：

单击第一个div后，删除初始点击处理程序。单击一个此类div后，使用$('.charContainer').off('click')执行此操作。
将$(.foes).on('click', ...移至原始点击处理程序。

＆＃13;

$(document).ready(function() {
  $('.charContainer').on('click', function() {
    $('.charContainer').off('click'); // *** add this line
    $('#your').append($(this));
    $('.characters>.charContainer').each(function() {
      $(this).removeClass('charContainer').addClass('foes');
      $('#enemies').append($(this));
    });
    $('.characters').remove();
    $('.foes').on('click', function() { // *** move this into the click handler
      $('#opponent').append($(this));
      $(this).addClass('defender');
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="characters">
  <div class="charContainer darth">
    <span>1</span><img class="vade" src="assets/images/vader.jpg">
  </div>
  <div class="charContainer luke">
    <span>2</span><img class="skywalker" src="assets/images/luke.jpg">
  </div>
  <div class="charContainer won">
    <span>3</span><img class="obi" src="assets/images/obiwan.jpg">
  </div>
  <div class="charContainer maul">
    <span>4</span><img class="dmaul" src="assets/images/maul.png">
  </div>
</div>
<div id="your">
  <h2>Your Character</h2>
</div>
<div id="enemies">
  <h2>Enemies</h2>
</div>
<div id="opponent">
  <h2>Opponent</h2>
</div>

＆＃13;

将div添加到div后，将div添加到另一个div

3 个答案: