Нужна помощь в перемещении divs в другой div после функции onclick

У меня есть контейнер с четырьмя div. После того, как я нажму на один div, оставшиеся три neeed будут добавлены к другому div. Как я могу это достичь?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Week 4 Game</title>
    <link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">

    <!-- Added link to the jQuery Library -->
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src = "assets/javascript/game.js">      </script>

    </head>
    <body>
    <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>


    </body>
    </html>

JQuery

    $(document).ready(function(){
       var yourCharacter;
       var enemy1;
       var enemy2;
       var enemy3;
      $('#c1').text("Darth Vader");
      $('#c2').text("Luke Skywalker");
      $('#c3').text("Obi Won");
      $('#c4').text("Darth Maul");
      var health = $('#c1hp').data('hp');
      $('#c1hp').html(health);
      var health = $('#c2hp').data('hp');
      $('#c2hp').html(health);
      var health = $('#c3hp').data('hp');
      $('#c3hp').html(health);
      var health = $('#c4hp').data('hp');
      $('#c4hp').html(health);

      $('.charContainer').on('click', function(){
      yourCharacter = $(this);
      $('#your').append(yourCharacter);
      enemy1 = $('.vader');
      $('#enemies').append(enemy1);

      })

      });

Мне нужно добавить оставшиеся charContainers, которые не были нажаты на контейнер контейнера врагов

javascript,jquery,html,

1

Ответов: 3

1 принят

Поскольку «ваш персонаж» уже был перемещен к тому моменту, когда остальные персонажи должны быть перемещены, селектор '.characters>.charContainer'(все «charContainer» дети из «символов») не будет выбирать вашего персонажа (поскольку он уже перемещен) - просто оставшиеся символы

$('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each(function() {
        $('#enemies').append($(this));
    });
})

Альтернативная версия с использованием функции стрелки:

$('.charContainer').on('click', function() {
    $('#your').append($(this));
    $('.characters>.charContainer').each( (undefined, char) => { $('#enemies').append($(char)) } );
})

Или заимствуя использование Tekebo appendTo:

$('.charContainer').on('click', function() {
    $(this).appendTo('#your');
    $('.characters>.charContainer').appendTo('#enemies');
})

Примечание: основное преимущество использования селектора children в отличие от братьев и сестер щелкнутого div или всех divs класса charContainer заключается в том, что не имеет значения, в каком порядке он выполняется - результат будет таким же. (Тем не менее, перемещение последнего нажатого div приведет к большей работе)

2

Это работает для меня. Вы можете добавить проверку равенства, так как выбранный div будет первоначально добавлен к врагам, а затем перемещен:

$('.charContainer').on('click', function(){
      $('.charContainer').each(function() {
        $('#enemies').append($(this));
      })
      yourCharacter = $(this);
      $('#your').append(yourCharacter);

  })
1

Вы можете просто использовать siblings () , например:

$(document).ready(function(){
  $(".charContainer").on("click",function(){
    $(this).siblings().appendTo("#enemies");
    $(this).appendTo("#your");
  });
});
JavaScript, JQuery, HTML,
Похожие вопросы
Яндекс.Метрика