基于按钮点击使用CSS隐藏和显示HTML元素

hivapdat 于 2023-05-19 发布在其他

关注(0)|答案(3)|浏览(172)

使用普通的HTML，Javascript，最好是纯CSS，我试图实现一个功能，即当用户单击按钮时，接下来的4个元素会显示给用户。
由于代码片段中的限制，样式不是很反射--因为我实现了一个网格系统，所以实际上一行中有4个项目（它们在上面只是水平的）。
默认情况下，我只想显示4个项目，但当用户选择“加载更多”，然后显示下4个&等等。按钮应始终保持在最后一个可见元素的正下方。
有人能指导或参考一种能实现这一结果的方法吗？

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p>Showing 4 of 10</p>
  <button>
    Load more
  </button>
</div>

css

来源：https://stackoverflow.com/questions/76273900/hide-and-show-html-elements-using-css-based-on-button-click

3条答案

按热度按时间

3pmvbmvn1#

这就是你想做的吗？说明：updateCount将当前计数写入p元素。updateItems根据count的当前值更改项目的显示属性。按钮上的事件侦听器将当前计数的值增加4，然后调用updateItems函数，该函数根据当前计数更新样式，然后调用updateCount函数将当前页写入p。我希望这对你有帮助！

const items = Array.from(document.querySelectorAll('.item'));
let count = 4;

function updateCount() {
  document.querySelector('p').innerHTML = 'Showing ' + count + ' of ' + items.length;
}

function updateItems() {
  for (let index = 0; index < count; index++) {
    items[index].style.display = '';
  }

  for (let index = count; index < items.length; index++) {
    items[index].style.display = 'none';
  }

  updateCount();
}

updateItems();

document.querySelector('button').addEventListener('click', () => {
  count += 4;
  count = count > items.length ? items.length : count;
  updateItems();
});

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <p></p>
  <button>
    Load more
  </button>
</div>

赞(0）回复(0）举报 2023-05-19

iqih9akk2#

这是你要找的吗？如果你只在开始时显示前4个元素，那么其余的元素需要隐藏，直到你按下按钮。
一旦你按下它，循环通过所有隐藏的元素，并删除类隐藏这些元素d-none在这个例子中，并改变您的文本从Showing 4 of 8到Showing 8 of 8与textContent

const load = document.getElementById("load");
const divs = document.getElementsByClassName("d-none");
const showing = document.getElementById("showing");
load.addEventListener("click", function(){
    Array.from(divs).forEach((ele) => {
    // Do stuff here
    ele.classList.remove("d-none");
  });
  showing.textContent = "Showing 8 of 8";
})

.container {
  padding: 16px;
}

.items-container {
  flex-direction: row;
  display: flex;
  gap: 16px;
}

.item {
  flex: 0 0 auto;
  width: 25%;
  background-color: lightblue;
  height: 320px;
}

.d-none {
  display: none;
}

<div class="container">
  <div class="items-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item d-none"></div>
    <div class="item d-none"></div>
    <div class="item d-none"></div>
    <div class="item d-none"></div>
  </div>
  <p id="showing">Showing 4 of 8</p>
  <button id="load">
    Load more
  </button>
</div>

赞(0）回复(0）举报 2023-05-19

kognpnkq3#

我假设你已经加载了元素，如果没有，我给予你的解决方案将无法完全工作：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Filter Testing</title>
    <style>
        .container {
            padding: 16px;
        }

        .items-container {
            flex-direction: row;
            display: flex;
            gap: 16px;
        }

        .item {
            flex: 0 0 auto;
            width: 25%;
            background-color: lightblue;
            height: 320px;
        }

        .hidden-item {
            display: 'none';
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="items-container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
            <div class="hidden-item"></div>
        </div>
        <p>Showing 4 of 10</p>
        <button id="loadMoreButton">
            Load more
        </button>
    </div>
    <script>
        //Let save the button reference 
        let loadMoreButton = document.getElementById('loadMoreButton');
        // Save the hidden items
        //Create an array to iterate, because the querySelector return a node list
        function loadMoreItems() {
            let hiddenItems = document.querySelectorAll('.hidden-item');
            let displayedItems = document.querySelectorAll('.item');
            Array.from(hiddenItems).forEach(function (item, index) {
                //Lets load just 4 more items
                //Remember the array init count in 0, so 3 is the 4 element loaded
                if (index < 4) {
                    //Lets remove the class to hide the element and add the class tho dsiplayed elements
                    item.classList.remove('hidden-item');
                    item.classList.add('item');
                }
            });
        }
        // Add the loadMoreItems to button
        loadMoreButton.addEventListener('click', loadMoreItems);
    </script>

</body>

</html>

赞(0）回复(0）举报 2023-05-19

我来回答

基于按钮点击使用CSS隐藏和显示HTML元素

3条答案

相关问题

热门标签

最新问答