Javascript 如何将功能应用于单个选项卡

我正在尝试为使用W3选项卡构建的选项卡组件构建其他选项卡功能。所需的功能是：

• 单击按钮时，带有>3
  的选项卡将隐藏并显示其余部分
• 输出选项卡中所有项目的计数，并在按钮中输出
• 将多个选项卡组件添加到页面

问题是我的函数不是特定的，当我的if语句之一的

>3

条件不满足或者页面上有多个选项卡组件时，它就会失效

我也尝试过使代码干燥（请参阅注释代码），但同样，我不确定如何构造函数，使其分别应用于每个ul和每个tab组件

这是一个

---

您可以使用

每个

循环迭代您的uls，然后使用

$（this）

&

.find（）

获取所需元素，即：lis，然后隐藏/显示相同的元素

演示代码：

函数tabCount（）{
//循环内容>ul
$（“.content ul”）。每个（函数（）{
//得到李的长度
var testLength=$（this.find（“li”）.length
如果（测试长度>3）{
$（this.find（“li”）.slice（0,3）.addClass（“show”）；
testLength=testLength-3；
//隐藏没有课堂表演的李
$（this.find（“li:not（'.show'）”））.hide（）
//将总计添加到按钮跨度
$（this）.closest（.content”）.find（'.all'）.children（'span'）.text（testLength）；
}否则{
$（this.find（“li”）.addClass（“show”）；
$（this）.closest（“.content”）.find（'.all'）.hide（）；
}
});
}
tabCount（）；
$（'.all'）。在（'click'，function（）上{
$（this）.兄弟姐妹（'ul'）.find（'li'）.show（）
$（this.remove（）；
});
.tabs{
宽度：20em；
字体系列：“lucida grande”，无衬线；
}
[role=“tablist”]{
裕度：0-0.1米；
溢出：可见；
}
[role=“tab”]{
位置：相对位置；
保证金：0；
填充：0.3em 0.5em 0.4em；
边界：1px固体hsl（219,1%，72%）；
边界半径：0.2米0.2米0；
箱形阴影：0.2米hsl（219,1%，72%）；
溢出：可见；
字体家族：继承；
字体大小：继承；
背景：hsl（220，20%，94%）；
}
[role=“tab”]：悬停：：在，
[role=“tab”]：焦点：：在，
[role=“tab”][aria selected=“true”]：：之前{
位置：绝对位置；
底部：100%；
右：-1px；
左：-1px；
边界半径：0.2米0.2米0；
边界顶端：3倍固体hsl（20,96%，48%）；
内容：''；
}
[role=“tab”][aria selected=“true”]{
边界半径：0；
背景：hsl（220，43%，99%）；
大纲：0；
}
[role=“tab”][aria selected=“true”]：不（：焦点）：不（：悬停）：：之前{
边框顶部：5px实心hsl（218,96,48%）；
}
[role=“tab”][aria selected=“true”]：：之后{
位置：绝对位置；
z指数：3；
底部：-1px；
右：0；
左：0；
高度：0.3em；
背景：hsl（220，43%，99%）；
盒影：无；
内容：''；
}
[role=“tab”]：悬停，
[role=“tab”]：焦点，
[role=“tab”]：活动{
大纲：0；
边界半径：0；
颜色：继承；
}
[role=“tab”]：悬停：：在，
[role=“tab”]：焦点：：之前{
边框颜色：hsl（20,96%，48%）；
}
[role=“tabpanel”]{
位置：相对位置；
z指数：2；
填充：0.5em 0.5em 0.7em；
边界：1px固体hsl（219,1%，72%）；
边界半径：0.2米0.2米0.2米；
箱形阴影：0.2米hsl（219,1%，72%）；
背景：hsl（220，43%，99%）；
}
[role=“tabpanel”]：焦点{
边框颜色：hsl（20,96%，48%）；
箱形阴影：0.2米hsl（20,96%，48%）；
大纲：0；
}
[role=“tabpanel”]：焦点：：之后{
位置：绝对位置；
底部：0；
右：-1px；
左：-1px；
底部边界：3倍实心hsl（20,96%，48%）；
边界半径：0.2米0.2米；
内容：''；
}
[role=“tabpanel”]p{
保证金：0；
}
[role=“tabpanel”]*+p{
边缘顶部：1米；
}
.表演{
显示：块
}

尼尔斯·弗拉姆
阿格尼斯·奥贝尔

1洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图·阿迪皮斯·艾利特。驱虫剂，驱虫剂
2洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图·阿迪皮斯·艾利特。驱虫剂，驱虫剂
3洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图·阿迪皮斯·艾利特。驱虫剂，驱虫剂
4洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图尔·阿迪皮西奇精英。驱虫剂，驱虫剂
我的同僚们都是精英。驱虫剂，驱虫剂

显示所有同行评审的出版物

一个gdfgdfg dfgdf gd
B 456465656佩里亚姆，佩里亚姆
C.我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们。驱虫剂，驱虫剂
我的同僚们都是精英。驱虫剂，驱虫剂
我是一位杰出的政治家。驱虫剂，驱虫剂
我的同僚们都是精英。驱虫剂，驱虫剂
G.我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚，我的同僚。驱虫剂，驱虫剂

显示所有同行评审的出版物
尼尔斯·弗拉姆2
阿格尼斯·奥贝尔2

1洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图·阿迪皮斯·艾利特。驱虫剂，驱虫剂
2洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图·阿迪皮斯·艾利特。驱虫剂，驱虫剂
3洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图·阿迪皮斯·艾利特。驱虫剂，驱虫剂
4洛雷姆·伊普苏姆·多洛尔·阿梅特·康塞特图尔·阿迪皮西奇精英。驱虫剂，驱虫剂

显示所有同行评审的出版物

一个gdfgdfg dfgdf gd
B 456465656佩里亚姆，佩里亚姆
C.我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们，我的同僚们。驱虫剂，驱虫剂

显示所有同行评审的出版物
太好了。非常感谢。我能看到的唯一问题是，一旦单击选项卡，第二个选项卡组件就是h
function tabCount() { 
  var publication = $('.content .publications li');
  var project = $('.content .projects li');
  var publications = publication.length;
  var projects = project.length;


  if (publications > 3) {
    publication.slice(0,4).addClass('show');
    publications = publications - 3;
    $('.content .publications').next('.all').children('span').text(publications);
  } else { 
    publication.addClass('show');
    $('.all').hide();
  }

  if ( projects > 3) {
    console.log(projects)
    project.slice(0,4).addClass('show');
    projects = projects - 3;
    $('.content .projects').next('.all').children('span').text(projects);
  } else { 
    publication.addClass('show');
    $('.all').hide();
  }

  // var parent = $('.content ul')
  // var test = $('.content ul li');
  // var testLength = test.length;
  //
  // parent.each(function( ) {
  //   if (testLength > 3) {
  //     test.slice(0,4).addClass('show');
  //     testLength = testLength - 3;
  //     $('.content ul').next('.all').children('span').text(testLength);
  //   } else {
  //     $('.content ul li').addClass('show');
  //     $('.all').hide();
  //   }
  // });
}
tabCount();


  $('.all').on('click', function () {
    $(this).siblings('ul').find('li').addClass('show');
    $(this).remove();
  });