根据当前索引显示隐藏的div数量jquery

Question

我正在使用 jQuery 索引。这里我需要根据当前索引添加和删除div。

我要找的是当我当前的索引大于 7 时我需要删除前四个 div，当我当前的索引小于四（4）时我需要再次显示那些删除的前四个 div。

我使用 :lt(4) 隐藏前四个 div。但是我不知道如何让它恢复显示。

提前致谢

$(window).load(function() {

  $(document).keydown(function(e) {
   if (e.keyCode == 37){

   


   }
   else if (e.keyCode == 39){

   


   }
   else if (e.keyCode == 40){

    var cIndex = $('.foo.active').index();
      
          if(cIndex > 7) {

              $('.test').find('.foo:lt(4)').remove();

          }


   }
    else if (e.keyCode == 38){

    var cIndex = $('.foo.active').index();
      
          if(cIndex < 4) {

              $('.test').find('.foo:lt(4)').add();

          }


   }
  });
  
});

.test {
  width: 420px;
  height: 200px;
  text-align: center;
}

.foo {
  width: 100px;
  height: 100px;
  line-height: 100px;
  display: inline-block;
  background: #ccc;
  margin-bottom: 4px;
}

.foo.active {
  background: #565656;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
    <div class="foo active">1</div>
    <div class="foo">2</div>
    <div class="foo">3</div>
    <div class="foo">4</div>
    <div class="foo">5</div>
    <div class="foo">6</div>
    <div class="foo">7</div>
    <div class="foo">8</div>
    <div class="foo">9</div>
    <div class="foo">10</div>
    <div class="foo">11</div>
    <div class="foo">12</div>
</div>

Answer 1

您可以将 class hide 添加到您要隐藏的那些元素，然后当您想要显示它们时使用 class 和 select 它们，就像这样:

$('.foo:lt(4)').addClass('hide').fadeOut();
// when you show them back
$('.foo.hide').removeClass('hide').fadeIn();

根据当前索引显示隐藏的div数量jquery

show hide no of divs according to the current index jquery

html

javascript

jquery

key-events