Нажмите на карту, чтобы отобразить клон карты вверху страницы.

Question

Застрял.Не знаю, как поступить.

У меня 10 карт.Когда пользователь нажимает на конкретную карту, я хотел бы клонировать карту и добавить ее в div в верхней части страницы.Однако, когда пользователь нажимает на другую карту, я не хочу, чтобы первая карта исчезла, я хочу, чтобы она осталась и добавила вторую карту рядом с первой картой.Кроме того, хотите отображать максимум 5 карт вверху.Если пользователь нажимает на шестую карточку, первая должна исчезнуть, а щелкнутая карточка должна отображаться как последняя карточка и т. Д.

$('.card').on('click', function() {
  $('.main').slideDown('fast');
  $('.card1').fadeIn(500).clone().appendTo($('.main1'));
  $('.card2').fadeIn(500).clone().appendTo($('.main2'));
  $('.card3').fadeIn(500).clone().appendTo($('.main3'));
  $('.card4').fadeIn(500).clone().appendTo($('.main4'));
  $('.card5').fadeIn(500).clone().appendTo($('.main5'));
});

.main { display: none;}

.card {
  padding: 16px;
  border: 1px solid #f00;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <div class="main1"></div>
  <div class="main2"></div>
  <div class="main3"></div>
  <div class="main4"></div>
  <div class="main5"></div>
</div>

<div class="container">
  <div class="card card-1">
    <p>Card 1</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-2">
    <p>Card 2</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-3">
    <p>Card 3</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-4">
    <p>Card 4</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-5">
    <p>Card 5</p>
    <p>Lorem ipsum</p>
  </div>

  <!-- 5 more cards -->
</div>

Answer 1

Вам нужно использовать clone() и проверить, есть ли в .main более 5 пунктов, используя children().Пожалуйста, найдите фрагмент ниже

$('.card').on('click', function() {
  if ($('.main').children().length >= 5) {
    $('.main .card').first().remove();
  }
  $(this).clone().hide().appendTo($('.main')).fadeIn(500);
});

.main {
  display: flex;
}

.card {
  padding: 16px;
  border: 1px solid #f00;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">

</div>

<div class="container">
  <div class="card card-1">
    <p>Card 1</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-2">
    <p>Card 2</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-3">
    <p>Card 3</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-4">
    <p>Card 4</p>
    <p>Lorem ipsum</p>
  </div>

  <div class="card card-5">
    <p>Card 5</p>
    <p>Lorem ipsum</p>
  </div>

  <!-- 5 more cards -->
</div>

Answer 2

Вы можете использовать childen (). First (). Remove, чтобы удалить первый.а затем добавьте новый div.

это попытка сделать то, что, я думаю, вы хотите сделать

<div class="main">
</div>

<div class="container">
    <div class="card card-1">
        <p>Card 1</p>
    </div>

    <div class="card card-2">
        <p>Card 2</p>
    </div>

    <div class="card card-3">
        <p>Card 3</p>
    </div>

    <div class="card card-4">
        <p>Card 4</p>
    </div>

    <div class="card card-5">
        <p>Card 5</p>
    </div>

</div>

$(document).ready(() => {
  const main = $('.main')
  const max = 3;
  let count = 0;
  $('.card').on('click', function () {
    main.slideDown();
    if (count < max) count++
    else main.children().first().detach()

    $(this).fadeIn(500).clone().appendTo(main);

  });
})

Answer 3

вы можете попробовать с методом detach () https://api.jquery.com/detach/

, как сказал @Cid, использовать правильное имя класса в селекторе jQuery .card-1 .card-2 и так далее