Question

我有一些图块，最初我只需要显示4个图块。单击按钮后需要显示所有块。任何人都可以在这里帮助。

var div_count = $('div').length; //7

$div = $('div');

$div.each(function() {
  var $divs = $(this).children();
  if ($divs.length > 5) {
    $div.children(':nth-of-type(n+5)').hide();
  }
});

$('button').click(function() {

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

<button>View All</button>

Answer 1

您可以使用gt()功能隐藏除前四个以外的所有其他div，并在单击按钮后显示全部div，请参见下文

$(function(){
  $('div:gt(3)').hide(); // hide all divs after four
  $('button').on('click', function(){
   $('div').show(); // show all divs
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div>

<button>View All</button>

如何显示最多4个块，然后单击按钮显示所有块？

1 个答案: