javascript - 隐藏 div 并在单击按钮时启用

Question

我有多行

<div class="row" id="move-data-row0"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>

我只想显示前三个，点击按钮后应该再显示 3 个。

我的第一个想法是给每个 div 一个相同的类名和一个索引，但我不知道应该如何实现 JavaScript。

我一开始试图隐藏一个 div，但这并不奏效

$("#move-data-row0").children().prop('disabled',true);

Answer 1

您可以使用这个最小示例，或对其进行改进以获得您真正想要的:

HTML:

<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
<button>More</button>

JavaScript:

$(document).ready(function(){
    $('.row:gt(2)').hide();
    $('button').click(function(){
        $('.row:hidden:lt(3)').show();
    });
});

fiddle :https://jsfiddle.net/lmgonzalves/e0ppjwnm/