单击卡片，在页面顶部显示卡片的克隆

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

您可以尝试使用detach()方法https://api.jquery.com/detach/

正如@Cid所说，将正确的类名用于jQuery选择器.card-1、.card-2等等

Answer 2

您需要使用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 3

您可以使用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);

  });
})