色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

基于按鈕點擊使用CSS隱藏和顯示HTML元素

CSS
錢斌斌2年前7瀏覽0評論

使用普通的HTML，Javascript，最好是純CSS，我試圖實現一個功能，當用戶點擊一個按鈕時，接下來的4個元素會顯示給用戶。

由于代碼片段的限制，這些樣式并沒有很好地反映出來——因為我已經實現了一個網格系統，所以實際上一行有4個項目(它們在上面只是水平的)。

默認情況下，我只想顯示4個項目，但當用戶選擇& quot加載更多& quot，則顯示接下來的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>

這是你正在尋找的嗎？如果你在開始時只顯示前4個元素，那么剩下的需要隱藏起來，直到你按下按鈕。

一旦您按下它，循環通過所有隱藏的元素，并刪除隱藏這些元素的類d-none在這個例子中，并更改您的文本從顯示4/8到顯示8/8的文本內容

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>

這是你想要做的嗎？解釋: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>

我假設您已經加載了元素，如果沒有，我給你的解決方案將不會完全工作:

<!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>