时间戳

首页 > 解决方案 > 将事件单击添加到多个按钮实例

javascript - 将事件单击添加到多个按钮实例

问题描述

我正在尝试构建一堆 Bootstrap 卡。

当卡片少于 10 时，隐藏加载更多按钮。

当卡片超过10张时，隐藏一些卡片（10张卡片之后的卡片） - 从第11张卡片所有卡片，添加css类（隐藏类）。

单击“加载更多”后，它应该会显示另外 10 张卡片 - 只需删除（卡片中的隐藏类）。并隐藏其余的牌。到现在它会显示 10 + 10（点击事件后）并隐藏其余卡片（21 卡片开始，通过按钮点击显示）

我无法用 Javascript 实现这一点。

如果有人可以为此提出任何建议。我正在寻找有用的评论来解决这个问题。

编辑：我不想实现任何Ajax只是简单的 Javascript，在页面加载期间加载，并用JavaScript.

应该有多个按钮实例——在这个例子中，有四叠卡片，每叠卡片应该有不同的“加载按钮”。

window.onload = multipleCards;

function multipleCards(){
    //first find all the footer stacks, then loop through, make buttons - hide - and load function
    var stackIndex = document.getElementsByClassName("footer-card");
    var btnIndex = document.querySelectorAll(".d-grid .gap-4");
    
    //loop for all footer stacks
    for(var i=0; i<stackIndex.length; i++){
        var cardsNum = stackIndex[i].getElementsByClassName("col-6");
        if(cardsNum.length <= 10){          
            btnIndex[i].querySelector(".btn").style.display = 'none';
        } else {
            stackIndex[i].getElementsByClassName("col-6").classList.add("invisible");
            btnIndex[i].querySelector(".btn").click.classList.remove("invisible");
        }
        
        
    }
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<h3>Footer card - I</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

<h3>Footer card - II</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

<h3>Footer card - III</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

<h3>Footer card - IV</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

</body>
</html>

标签： javascript

解决方案

window.onload = multipleCards;

function loadMoreCards() {
    //Get all the invisible footer cards by index and show them
    var i = this.getAttribute("index");
    var stackIndex = document.getElementsByClassName("footer-card");
    var btnIndex = document.getElementsByClassName("btn");

    var cardsNum = stackIndex[i].getElementsByClassName("card d-none");
    if(cardsNum.length<=10) {
       btnIndex[i].classList.add("d-none");
    }
    Array.from(cardsNum).slice(0, 10).forEach( function(c) { c.classList.remove("d-none"); });
}

function multipleCards() {
    //first find all the footer stacks, then loop through, make buttons - hide - and load function
    var stackIndex = document.getElementsByClassName("footer-card");
    var btnIndex = document.getElementsByClassName("btn");
    
    //loop for all footer stacks
    for(var i=0; i<stackIndex.length; i++) {
        var cardsNum = stackIndex[i].getElementsByClassName("card");
        var btn = btnIndex[i];
        if(cardsNum.length <= 10){          
            btn.classList.add("d-none");
        } else {
            Array.from(cardsNum).slice(10).forEach( function(c) { c.classList.add("d-none"); });
            btn.classList.remove("d-none");
        }
        btn.setAttribute("index", i);
        btn.addEventListener('click', loadMoreCards);
    }
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<h3>Footer card - I</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

<h3>Footer card - II</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

<h3>Footer card - III</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

<h3>Footer card - IV</h3>
<div class="row footer-card">
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
<div class="col-6 card"><p>This is card</p></div>
</div>

<div class="d-grid gap-4">
<button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

</body>
</html>

推荐阅读