Javascript 使用Jquery每3个元素显示更多/更少

我想加载前3个列表项，每个

div.content

，然后在用户单击“显示更多”时显示下3个项目

当用户单击“显示较少”时，返回显示块前3个列表

我看到了另一个答案 参考文献

但我不能应用我的代码

我如何才能最好地实现这一点

注：对不起，我的英语不好

这是我的HTML

1.
2.
3.
4.
5.
6.
7.
8.
9
11
12
13
14
15
16
十七,
18
19
21
22
23
24
25
26
27
28
29

• 标识符必须是唯一的，这种方法将这些ID更改为类
• 您可以使用此选择器隐藏其余的

  。项
  ：
  。项：gt（2）

• 这些链接（越来越少）有一个

  数据属性

  ，用于指示操作

这种方法不会隐藏“显示较少”或“显示较多”链接

var parentSelector=“div.content”，
showItemsSelector=“.items:gt（2）”，
showlesselector=“.ShowMore、.ShowLess”；
$（文档）.ready（函数（）{
$（parentSelector）.each（showItemsHandler）；
$（showlesselector）.on（'click'，showHideHandler）；
});
函数showHideHandler（）{
if（$（this）.data（'action'）=='show'）$（this.closest（parentSelector）.children（'.items'）.show（）；
else showItemsHandler.bind（$（this.closest（parentSelector））（）；
}
函数showtItemShandler（）{
$（this）.children（showItemsSelector）.hide（）；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
11
12
13
14
15
16
十七,
18
19
21
22
23
24
25
26
27
28
29

这是对参考答案代码的改编：

$（文档）.ready（函数（）{
$（'.items'）.hide（）；
$（'.content'）.find（'.items:lt（3）'）.show（）；
$（'.ShowMore'）。单击（函数（ev）{
$（ev.currentTarget）.parent（）.find（'.items'）.show（）；
});
$（'.ShowLess'）。单击（函数（ev）{
$（ev.currentTarget）.parent（）.find（'.items'）.not（':lt（3'）.hide（）；
});
});

1.
2.
3.
4.
5.
6.
7.
8.
9
11
12
13
14
15
16
十七,
18
19
21
22
23
24
25
26
27
28
29
以下代码片段显示了如何在单击“显示更多”时显示接下来的三个项目，以及在单击“显示较少”时将前三个项目收拢回去

将ID更改为CLASS，因为这样做是正确的。多个元素不应具有相同的id

解释

首先使用以下选择器隐藏除前三项之外的所有项目：

.content.items:第n个子项（n+1）：第n个子项（-n+3）

然后单击“显示更多”按钮，使用以下选择器查找下三个隐藏项：

。项目：不（：可见）：lt（3）


此选择器选择前三个不可见的项目

最后，在“显示较少”上，隐藏所有元素并像以前一样仅显示前三个元素


$（函数（）{
$（'.content.items'）.hide（）；
$（'.content.items:n子项（n+1）：n子项（-n+3））.show（）；
$（'.ShowMore'）。单击（函数（）{
$（this）.closest（'.content'）.find（'.items:not（：visible）：lt（3'）.show（）；
})
$（'.ShowLess'）。单击（函数（）{
$（this）.closest（'.content'）.find（'.items'）.hide（）；
$（this）.closest（'.content'）.find（'.items:lt（3）'）.show（）；
})
})

1.
2.
3.
4.
5.
6.
7.
8.
9
11
12
13
14
15
16
十七,
18
19
21
22
23
24
25
26
27
28
29
HTML中的标识符必须是唯一的。请从使HTML文档有效开始