如何使 javascript 旋转木马的过滤器正常工作

Question

JavaScript carousel for work section which should display all my work by default in "All Work" but when a user clicks on App work only app work should display and when a user clicks on web work only web work should display.

The filter property of "All Work" , "App Work" , "Web Work" is not functional and I have no idea how to make that work.

check how its look on the website view link

source file GitHub Link

GitHub issues Link

Buttons are not doing anything.

I need that when "All Work" get click both slides appear one after other in sequence "App Work" then "Web Work" . and when "App Work" gets click all carousel slides of "App Work" will appear one after other in sequence. and when "Web Work" gets click all carousel slides of "Web Work" will appear one after other in sequence. like a filter.

what I have tried

but not get the desired result

1. Adding css style .hide { display: none; } .hide { display: none; } with the above method, the size of the slides remains there.

2. Adding innerHTML for Web Work button

const myworkBuild = document.querySelector(".mywork");
webWork.addEventListener("click", () => {
myworkBuild.innerHTML = "";
  for (let i = 0; i < 3; i++) {
    myworkBuild.innerHTML +=
      '<div class="slide web"><div class="webWork"><div class="webSS">' +
      '<img src="dell.png" />' +
      '</div><div class="webContent">' +
      "<h2>>Web 2 slide</h2>" +
      "<p>Lorem ipsum Fugit eius nemo</p>" +
      '<div class="button">' +
      '<a href="#">Get Apk</a>' +
      '<a href="#">More Info</a>' +
      "</div></div></div></div>";
  }
});

3. Adding innerHTML with Array for App Work button

const myworkBuild = document.querySelector(".mywork");
appWork.addEventListener("click", () => {
const appData = [
    [
      "WhatsApp-UI-Clone",
      "whatsapp3.gif",
      "Just simple UI clone of WhatsApp, This app is built with flutter.",
      "#getapplink",
      "https://github.com/shahbajjamil",
    ],
    [
      "WhatsApp-UI-2",
      "whatsapp3.gif",
      "Just simple UI clone of WhatsApp, This app is build with flutter.",
      "#getapplink",
      "https://github.com/shahbajjamil",
    ],
  ];

  myworkBuild.innerHTML = "";
  for (let i = 0; i < appData.length; i++) {
    myworkBuild.innerHTML +=
      '<div class="slide app"><div class="appWork"><div class="appSS">' +
      '<img src='+appData[i][1]+' />' +
      '</div><div class="appContent">' +
      "<h2>"+appData[i][0]+"</h2>" +
      "<p>"+appData[i][2]+"</p>" +
      '<div class="button">' +
      '<a href='+appData[i][3]+'>Get Apk</a>' +
      '<a href='+appData[i][4]+'>More Info</a>' +
      "</div></div></div></div>";
  }
});

with the above method let slides = document.querySelectorAll(".slide"); does not update, so the slides.NodeLists.length remain the same even though slide get change, which leads to the same number of carousel slides in all filters "All Work" , "App Work" , "Web Work" when slides are less in number any section it displays empty carousel slide and when slides are more in any section it gets omit form carousel slide.

check how its look on the website view link

source file GitHub Link

GitHub issues Link

HTML code for App Work

          <div class="slide app">
             <div class="appWork">
                <div class="appSS">
                  <img src="whatsapp3.gif" />
                </div>
                <div class="appContent">
                  <h2>App 2 slide</h2>
                  <p>
                    Lorem ipsum Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem, delectus. 
                  </p>
                  <div class="button">
                    <a href="#">Get Apk</a>
                    <a href="#">More Info</a>
                  </div>
                </div>
              </div>
            </div>

HTML code for Web Work

          <div class="slide web">
              <div class="webWork">
                <div class="webSS">
                  <img src="dell.png" />
                </div>
                <div class="webContent">
                  <h2>Web 2 slide</h2>
                  <p>
                    Lorem ipsum Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem, delectus.
                    </p>
                  <div class="button">
                    <a href="#">View Site</a>
                    <a href="#">More Info</a>
                  </div>
                </div>
              </div>
            </div>

Please help me to fix this problem.

Answer 1

You could add visible and hidden classes for the visible ones and hidden ones respectively. Then you can query using slides.visible.

 document.querySelectorAll(".slide.visible")

 .visible { display: block }.hidden { display: none }