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

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

您可以将hide 类添加到您要隐藏的元素中，然后当您想要显示它们时使用该类并选择它们，就像这样：

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