Javascript 如何使用菜单按钮显示相应的元素数据类别？_Javascript_Html_Css_Dom

Javascript 如何使用菜单按钮显示相应的元素数据类别？

javascript html css dom

Javascript 如何使用菜单按钮显示相应的元素数据类别？,javascript,html,css,dom,Javascript,Html,Css,Dom,加载页面时，all过滤器按钮处于活动状态。它最多显示6个项目（最好在每次加载页面时随机选择，但不是必须的）。单击其他筛选按钮时，每个筛选按钮根据数据类别最多加载6个对应项只有当对应项超过6个时，所有过滤器按钮才会显示“加载更多”按钮。单击“加载更多”按钮后，该按钮将消失，并加载所有剩余的相应数据类别项现在，过滤器按钮不加载相应的数据类别（最多6个），除了all。我认为循环中出现了一些问题，但不确定具体是什么。 Html和css都很好，问题在于Javascript代码。请参见此处的预览和示例

加载页面时，all过滤器按钮处于活动状态。它最多显示6个项目（最好在每次加载页面时随机选择，但不是必须的）。单击其他筛选按钮时，每个筛选按钮根据数据类别最多加载6个对应项

只有当对应项超过6个时，所有过滤器按钮才会显示“加载更多”按钮。单击“加载更多”按钮后，该按钮将消失，并加载所有剩余的相应数据类别项

现在，过滤器按钮不加载相应的数据类别（最多6个），除了all。我认为循环中出现了一些问题，但不确定具体是什么。 Html和css都很好，问题在于Javascript代码。请参见此处的预览和示例代码：

HTML

Javascript

const filterContainer = document.querySelector(".portfolio-filter");
const filterBtns = Array.from( filterContainer.children );
const totalFilterBtn = filterBtns.length;
const portfolioItems = Array.from( document.querySelectorAll(".portfolio-item") );
const totalPortfolioItem = portfolioItems.length;
const nextButton = document.querySelector("button.next");
const maxNumber = 6;


function portfolioItemFilter(){
    
    // when all items load
    if(filterContainer.querySelector("button").getAttribute("data-filter") === "all" && filterContainer.querySelector("button").classList.contains("active") ) {
        
        for( let i = 0; i < totalPortfolioItem; i++){
            if(i < maxNumber){
                portfolioItems[i].classList.add("show");
            } else {
                portfolioItems[i].classList.add("hide");
            }
        }

        if( totalPortfolioItem > maxNumber) {
            nextButton.classList.remove("hidden");
        }

        nextButton.addEventListener("click", function() {

        for( let i = maxNumber; i < totalPortfolioItem; i++){
            
            portfolioItems[i].classList.remove("hide");
            portfolioItems[i].classList.add("show");
        }

            nextButton.classList.add("hidden");
        })
        console.log("yes");
    }
        

    // when clicked on filter buttons
    for(let i = 0; i < totalFilterBtn; i++){
        filterBtns[i].addEventListener("click", function(){
            filterContainer.querySelector(".active").classList.remove("active");
            this.classList.add("active");
            
            const filterValue = this.getAttribute("data-filter");

            for(let k = 0; k < totalPortfolioItem; k++){
                portfolioItems[k].classList.remove("show");
                portfolioItems[k].classList.remove("hide");

                if( filterValue === portfolioItems[k].getAttribute("data-category") ){

                    if(k <= maxNumber){
                        return portfolioItems[k].classList.add("show") ;
                    } 
                    else if (k >= maxNumber){
                        portfolioItems[k].classList.add("hide");

                        nextButton.classList.remove("hidden");

                        nextButton.addEventListener("click", function(){
                            nextButton.classList.add("hidden");
                            console.log(portfolioItems[k].classList);

                            portfolioItems[k].classList.remove("hide");
                            portfolioItems[k].classList.add("show");
                            return;
                        });
                    }   
                }
                else{
                    portfolioItems[k].classList.remove("show");
                    portfolioItems[k].classList.add("hide");
                }
                if(filterValue === 'all'){
                    portfolioItems[k].classList.remove("hide");
                    portfolioItems[k].classList.add("show");


                    if( totalPortfolioItem > maxNumber){
                        nextButton.classList.add("show");
                        nextButton.classList.remove("hidden");
                            let remaining = portfolioItems.slice( maxNumber );

                            remaining.forEach(el => {

                                el.classList.remove("show");
                                el.classList.add("hide");
                                
                            });
                    }
                }
            }
        });
    }
}

portfolioItemFilter();

const filterContainer=document.querySelector（“.portfolio filter”）；
const filterBtns=Array.from（filterContainer.children）；
const totalFilterBtn=filterBtns.length；
const portfolioItems=Array.from（document.queryselectoral（“.portfolio item”）；
const totalPortfolioItem=portfolioItems.length；
const nextButton=document.querySelector（“button.next”）；
常数maxNumber=6；
函数portfolioItemFilter（）{
//当所有项目加载时
if（filterContainer.querySelector（“按钮”）.getAttribute（“数据过滤器”）==“全部”&&filterContainer.querySelector（“按钮”）.classList.contains（“活动”））{
for（设i=0；imaxNumber）{
移除（“隐藏”）；
}
addEventListener（“单击”，函数（）{
for（设i=maxNumber；imaxNumber）{
nextButton.classList.add（“show”）；
移除（“隐藏”）；
让剩余=portfolioItems.slice（maxNumber）；
剩余。forEach（el=>{
el.类列表。删除（“显示”）；
el.classList.add（“隐藏”）；
});
}
}
}
});
}
}
portfolioItemFilter（）；

我用它工作（见代码片段）

我还重新定义了css/html，这样公文包项的默认显示为none，这样您就不需要同时使用hide和show类

总而言之，您只需要非常小心地使用条件，并确保您没有添加已经存在的类

const filterContainer=document.querySelector（“.portfolio filter”）；
const filterBtns=Array.from（filterContainer.children）；
const totalFilterBtns=filterBtns.length；
const portfolioItems=Array.from（document.queryselectoral（“.portfolio item”）；
const totalPortfolioItems=portfolioItems.length；
const nextButton=document.querySelector（“button.next”）；
常数maxNumber=6；
//页面加载时的初始筛选器
让currentFilter=filterContainer.querySelector（“按钮”）.getAttribute（“数据过滤器”）；
常量渲染=（过滤器，显示）=>{
//对于每个投资组合项目
for（设i=0；i
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
html, body {
  scroll-behavior: smooth;
  letter-spacing: 0.0625rem;
  line-height: 1.5;
  font-size: 100%;
  font-weight: 200;
  height: 100%;
  width: 100%;
}
::before, ::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn {
  font-size: 16px;
  padding: 12px 35px;
  font-weight: 500;
  color: #ffffff;
  border-radius: 40px;
  transition: all 0.3s ease;
  display: inline-block;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  background-color: red; 
}
.btn:hover {
  transform: scale(1.05);
}
.hidden {
  display: none !important;
}
.padd-15 {
  padding: 0 15px;
}
.section {
  background-color: #f2f2fc;
  min-height: 100vh;
  display: block;
  padding: 0 30px;
  position: fixed;
  left: 270px;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  opacity: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.section .container {
  padding-top: 60px;
  padding-bottom: 70px;
  margin: auto;
  max-width: 1100px;
  width: 100%;
}
.section .container .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
  position: relative;
}
.section .container .section-title {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 60px;
}
.section .container .section-title h2 {
  font-size: 30px;
  font-weight: 700;
  color: #302e4d;
  margin: 0;
  position: relative;
}
.section .container .section-title h2:before {
  content: '';
  height: 4px;
  width: 25px;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
}
.section .container .section-title h2:after {
  content: '';
  height: 4px;
  width: 50px;
  position: absolute;
  top: 100%;
  left: 0;
}
.portfolio .container {
  padding-bottom: 40px;
}
.portfolio .container .portfolio-filter {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.portfolio .container .portfolio-filter button {
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 10px;
  color: #302e4d;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.portfolio .container .portfolio-filter button.active{
  color: red;
}
.portfolio .container .portfolio-item {
  flex: 0 0 33.3%;
  max-width: 33.33%;
  margin-bottom: 30px;
}
.portfolio .container .portfolio-item.hide {
  display: none;
}
.portfolio .container .portfolio-item.show {
  display: block;
  animation: showItem 0.5s ease;
}
.portfolio .container .portfolio-item .portfolio-item-inner {
  border: 4px solid #fdf9ff;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info, .portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info h4, .portfolio .container .portfolio-item .portfolio-item-inner:hover .portfolio-info .icon {
  transform: translate(0px);
  opacity: 1;
}
.portfolio .container .portfolio-item .portfolio-item-inner img {
  width: 100%;
  display: block;
}
.portfolio .container .portfolio-item .portfolio-item-inner .portfolio-info {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.8);
  height: 100%;
  width: 100%;
  z-index: 1;
  padding: 30px;
  opacity: 0;
  transition: all 0.3s ease;
}
.portfolio .container .portfolio-item .portfolio-item-inner .portfolio-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  text-transform: capitalize;
  transition: all 0.3s ease;
  transform: translate(-20px);
  opacity: 0;
}
.portfolio .container .load-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
.portfolio .container .load-items .btn {
  margin: 0 15px;
  cursor: pointer;
}
.portfolio .container .load-items .btn.hide {
  display: none;
}

@keyframes showItem {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


const filterContainer = document.querySelector(".portfolio-filter");
const filterBtns = Array.from( filterContainer.children );
const totalFilterBtn = filterBtns.length;
const portfolioItems = Array.from( document.querySelectorAll(".portfolio-item") );
const totalPortfolioItem = portfolioItems.length;
const nextButton = document.querySelector("button.next");
const maxNumber = 6;


function portfolioItemFilter(){
    
    // when all items load
    if(filterContainer.querySelector("button").getAttribute("data-filter") === "all" && filterContainer.querySelector("button").classList.contains("active") ) {
        
        for( let i = 0; i < totalPortfolioItem; i++){
            if(i < maxNumber){
                portfolioItems[i].classList.add("show");
            } else {
                portfolioItems[i].classList.add("hide");
            }
        }

        if( totalPortfolioItem > maxNumber) {
            nextButton.classList.remove("hidden");
        }

        nextButton.addEventListener("click", function() {

        for( let i = maxNumber; i < totalPortfolioItem; i++){
            
            portfolioItems[i].classList.remove("hide");
            portfolioItems[i].classList.add("show");
        }

            nextButton.classList.add("hidden");
        })
        console.log("yes");
    }
        

    // when clicked on filter buttons
    for(let i = 0; i < totalFilterBtn; i++){
        filterBtns[i].addEventListener("click", function(){
            filterContainer.querySelector(".active").classList.remove("active");
            this.classList.add("active");
            
            const filterValue = this.getAttribute("data-filter");

            for(let k = 0; k < totalPortfolioItem; k++){
                portfolioItems[k].classList.remove("show");
                portfolioItems[k].classList.remove("hide");

                if( filterValue === portfolioItems[k].getAttribute("data-category") ){

                    if(k <= maxNumber){
                        return portfolioItems[k].classList.add("show") ;
                    } 
                    else if (k >= maxNumber){
                        portfolioItems[k].classList.add("hide");

                        nextButton.classList.remove("hidden");

                        nextButton.addEventListener("click", function(){
                            nextButton.classList.add("hidden");
                            console.log(portfolioItems[k].classList);

                            portfolioItems[k].classList.remove("hide");
                            portfolioItems[k].classList.add("show");
                            return;
                        });
                    }   
                }
                else{
                    portfolioItems[k].classList.remove("show");
                    portfolioItems[k].classList.add("hide");
                }
                if(filterValue === 'all'){
                    portfolioItems[k].classList.remove("hide");
                    portfolioItems[k].classList.add("show");


                    if( totalPortfolioItem > maxNumber){
                        nextButton.classList.add("show");
                        nextButton.classList.remove("hidden");
                            let remaining = portfolioItems.slice( maxNumber );

                            remaining.forEach(el => {

                                el.classList.remove("show");
                                el.classList.add("hide");
                                
                            });
                    }
                }
            }
        });
    }
}

portfolioItemFilter();