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

Question

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

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

问题是我的函数不是特定的，当> 3我的一个 if 语句的条件不满足或页面上有多个选项卡组件时，它会失败。

我也尝试过使代码 DRY（参见注释代码），但同样，我不确定如何构造函数，以便它单独应用于每个 ul 以及每个选项卡组件。

这是一个小提琴

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();
  });

标签： javascriptjquerytabs

Answer 1

您可以使用each循环遍历您的 uls，然后使用$(this)&.find()获取所需的元素，即：lis然后隐藏/显示相同。

演示代码：

function tabCount() {
  //loop through content > ul 
  $(".content ul").each(function() {
    //get length of li 
    var testLength = $(this).find("li").length
    if (testLength > 3) {
      $(this).find("li").slice(0, 3).addClass('show');
      testLength = testLength - 3;
      //hide li which doesn't have class show
      $(this).find("li:not('.show')").hide()
      //add total to button span
      $(this).closest(".content").find('.all').children('span').text(testLength);
    } else {
      $(this).find("li").addClass('show');
      $(this).closest(".content").find('.all').hide();
    }
  });
}
tabCount();


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

.tabs {
  width: 20em;
  font-family: "lucida grande", sans-serif;
}

[role="tablist"] {
  margin: 0 0 -0.1em;
  overflow: visible;
}

[role="tab"] {
  position: relative;
  margin: 0;
  padding: 0.3em 0.5em 0.4em;
  border: 1px solid hsl(219, 1%, 72%);
  border-radius: 0.2em 0.2em 0 0;
  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  background: hsl(220, 20%, 94%);
}

[role="tab"]:hover::before,
[role="tab"]:focus::before,
[role="tab"][aria-selected="true"]::before {
  position: absolute;
  bottom: 100%;
  right: -1px;
  left: -1px;
  border-radius: 0.2em 0.2em 0 0;
  border-top: 3px solid hsl(20, 96%, 48%);
  content: '';
}

[role="tab"][aria-selected="true"] {
  border-radius: 0;
  background: hsl(220, 43%, 99%);
  outline: 0;
}

[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
  border-top: 5px solid hsl(218, 96%, 48%);
}

[role="tab"][aria-selected="true"]::after {
  position: absolute;
  z-index: 3;
  bottom: -1px;
  right: 0;
  left: 0;
  height: 0.3em;
  background: hsl(220, 43%, 99%);
  box-shadow: none;
  content: '';
}

[role="tab"]:hover,
[role="tab"]:focus,
[role="tab"]:active {
  outline: 0;
  border-radius: 0;
  color: inherit;
}

[role="tab"]:hover::before,
[role="tab"]:focus::before {
  border-color: hsl(20, 96%, 48%);
}

[role="tabpanel"] {
  position: relative;
  z-index: 2;
  padding: 0.5em 0.5em 0.7em;
  border: 1px solid hsl(219, 1%, 72%);
  border-radius: 0 0.2em 0.2em 0.2em;
  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
  background: hsl(220, 43%, 99%);
}

[role="tabpanel"]:focus {
  border-color: hsl(20, 96%, 48%);
  box-shadow: 0 0 0.2em hsl(20, 96%, 48%);
  outline: 0;
}

[role="tabpanel"]:focus::after {
  position: absolute;
  bottom: 0;
  right: -1px;
  left: -1px;
  border-bottom: 3px solid hsl(20, 96%, 48%);
  border-radius: 0 0 0.2em 0.2em;
  content: '';
}

[role="tabpanel"] p {
  margin: 0;
}

[role="tabpanel"] *+p {
  margin-top: 1em;
}

.show {
  display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
  <div role="tablist" aria-label="Entertainment">
    <button role="tab" aria-selected="true" aria-controls="nils-tab" id="nils">
      Nils Frahm
    </button>
    <button role="tab" aria-selected="false" aria-controls="agnes-tab" id="agnes" tabindex="-1">
      Agnes Obel
    </button>
  </div>
  <div tabindex="0" role="tabpanel" id="nils-tab" aria-labelledby="nils" class="content">
    <ul class="publications">
      <li>1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
    </ul>
    <button class="all">Show all <span></span> peer-reviewed publications</button>
  </div>
  <div tabindex="0" role="tabpanel" id="agnes-tab" aria-labelledby="agnes" hidden="" class="content">
    <ul class="projects">
      <li>A gdfgdfg dfgdf gd.</li>
      <li>B 456465 656 periam, repellendus.</li>
      <li>C Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>D Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>E Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>F Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>G Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
    </ul>
    <button class="all">Show all <span></span> peer-reviewed publications</button>
  </div>
</div>

<div class="tabs">
  <div role="tablist" aria-label="Entertainment">
    <button role="tab" aria-selected="true" aria-controls="nils-tab2" id="nils2">
      Nils Frahm 2
    </button>
    <button role="tab" aria-selected="false" aria-controls="agnes-tab2" id="agnes2" tabindex="-1">
      Agnes Obel 2
    </button>
  </div>
  <div tabindex="0" role="tabpanel" id="nils-tab2" aria-labelledby="nils2" class="content">
    <ul class="publications">
      <li>1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
      <li>4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
    </ul>
    <button class="all">Show all <span></span> peer-reviewed publications</button>
  </div>
  <div tabindex="0" role="tabpanel" id="agnes-tab2" aria-labelledby="agnes2" hidden="" class="content">
    <ul class="projects">
      <li>A gdfgdfg dfgdf gd.</li>
      <li>B 456465 656 periam, repellendus.</li>
      <li>C Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, repellendus.</li>
    </ul>
    <button class="all">Show all <span></span> peer-reviewed publications</button>
  </div>

</div>

<script src="https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/js/tabs.js"></script>