Javascript 在取消单击JQuery中查看所有产品

目标是在产品表下创建一个“查看全部”按钮，单击该按钮后，在页面底部添加后者的克隆，填充所有可用空间。
-->当我点击“全部查看”按钮时，我想按字母顺序查看所有产品列表。 你能帮我继续前进吗！！

ABC.plp={
_自动加载：[
“查看全部”
],
viewAll:function（）{
$（“.plp产品容器”）.ready（函数（）{
$（“.button行[name=viewALL]”。单击（函数（）{
$（“.product item”）.show（）；
});
$（“.button行[name=viewALL]”。单击（函数（）{
$（“.product项”）.hide（）；
});
});
}，

首先需要隐藏所有产品项，然后使用切片方法显示匹配的元素。切片方法接受索引（开始和结束）。请阅读此处的详细信息-

要在单击按钮时显示所有产品项，请执行以下操作

$('button[name=viewALL]').click(function(){
   $( ".product-item" ).show();
});

要使按钮切换为“全部查看/较少查看”，您可以执行以下操作

$('button[name=viewALL]').click(function(){
   let btnText = $(this).text().toLowerCase();
   if (btnText === 'view all') {
      $(this).text('View Less');
      $( ".product-item" ).show();
   } else if (btnText === 'view less') {
      $(this).text('View All');
      $( ".product-item").not($( ".product-item").slice( 6, 10 )).hide();
   }
});

JS小提琴-

---

在按字母顺序排序的情况下，最好先对控制器中的数据进行排序，然后再将其打印到html中。

打开开发人员工具。您看到了什么？我看到了所有产品，因为我的按钮现在不起作用。我需要一个新功能来帮助我查看一些产品，当我单击按钮时，请单击“全部查看”，我可以显示所有产品。我看到“ACC未定义”。请阅读，.ACC.plp是我的文件js，我将所有代码都放在这个链接中，我编辑我的问题。我可以为我的案例应用相同的功能吗？您的问题不够清楚，无法理解要求。最好保持原始问题的原样，然后在原始问题下方插入“更新”文本，并添加新的chaNgesy问题几乎是一样的，我只是添加了“目标是在产品表下创建一个‘查看所有’按钮，点击后，在页面底部添加后者的克隆，填充所有可用空间”。我应用了您的建议和它的工作。感谢您的帮助。我会接受您的答案。很高兴知道：）

$('button[name=viewALL]').click(function(){
   let btnText = $(this).text().toLowerCase();
   if (btnText === 'view all') {
      $(this).text('View Less');
      $( ".product-item" ).show();
   } else if (btnText === 'view less') {
      $(this).text('View All');
      $( ".product-item").not($( ".product-item").slice( 6, 10 )).hide();
   }
});