主页 / 问题 / 844895
Accepted
Игорь
Asked:2020-06-21 19:48:53 +0000 UTC2020-06-21 19:48:53 +0000 UTC

如何在点击时显示每 4 个列表项

  • 772

有一个产品列表，显示 4 个，其余的带有display: none。每次点击按钮如何显示 4 个以上的产品？沙盒。

.list {
  column-count: 4;
  list-style: none;
}
.list li:nth-of-type(n+5) {
  display: none;
}

.btn-container {
  display: flex;
  justify-content: center;
}
<ul class="list">
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
</ul>

<div class="btn-container">
  <a href="#close" class="button">Button</a>
</div>

javascript

3 个回答

  1. Best Answer

    let showProduct = function() {
  let li = document.getElementsByTagName('li');
  let count = 4;
  for (item of li) {
    if (getComputedStyle(item).display == 'none' && count > 0) {
      item.style.display = 'block';
      count--;
    }
  }
}
    .list {
  column-count: 4;
  list-style: none;
}

.list li:nth-of-type(n+5) {
  display: none;
}

.btn-container {
  display: flex;
  justify-content: center;
}
    <ul class="list">
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>

  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>

  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
</ul>

<div class="btn-container">
  <a href="#close" class="button" onclick="showProduct()">Button</a>
</div>

    • 3

  2. 有一个产品列表，显示 4 个，其余显示：无。每次点击按钮如何显示 4 个以上的产品？

    var btn = document.querySelector('a.button');
var li = document.querySelectorAll('li');

btn.addEventListener('click', function (e) { 
  var c = 0; // counter
  li.forEach(function (el, i) { 
    // Visibility test checking parent style.display null if 'none'
    if( el.offsetParent === null && c < 4){
      console.log(i, el.style.display = 'block');
      c++;
    } 
  })
})
    .list {
  column-count: 4;
  list-style: none;
}
.list li:nth-of-type(n+5) {
  display: none;
}

.btn-container {
  display: flex;
  justify-content: center;
}
    <ul class="list">
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
  <li>Product 4</li>
  
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
</ul>

<div class="btn-container">
  <a href="#close" class="button">Button</a>
</div>

    • HTMLElement.offsetParent-对子元素进行近距离父迭代检查它们是否显示。返回时nullstyle.display='none'
    • 2

  3. 基本上，答案已经给出。我只加我的 5 美分。嗯，突然有人...

    const checkit=()=>{
  let noneCount=[...document.getElementsByTagName('li')].filter(e=>getComputedStyle(e).display=='none').length;
  [...document.getElementsByTagName('li')].map((e,i)=>{
    if (i>=noneCount&&getComputedStyle(e).display=='none') {
      e.style.display='block';
    }
  });
}
document.querySelector('.button').addEventListener('click',checkit);
    .list {
  column-count: 4;
  list-style: none;
}
.list li:nth-of-type(n+5) {
  display: none;
}

.btn-container {
  display: flex;
  justify-content: center;
}
    <ul class="list">
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
  <li>Product 4</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
</ul>
<div class="btn-container"><a class="button" href="#close">Button</a></div>

    • 2

相关问题