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>

我只想显示前三个，按一下按钮就会出现另外三个。

我的第一个想法是给每个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/

隐藏div并启用按钮单击

1 个答案: