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检查children()是否具有5个以上的项目。请在下面找到代码段

$('.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);

  });
})

点击卡片以在页面顶部显示卡片的克隆

3 个答案: