文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >向多个按钮实例添加事件单击

问向多个按钮实例添加事件单击
EN

Stack Overflow用户
提问于 2021-03-15 00:22:57
回答 1查看 132关注 0票数 0

我正试着建造一堆靴带卡。

当卡片小于10，然后隐藏加载-更多的按钮。

当卡超过10，隐藏一些卡片( 10卡后的卡片)-从第11张卡片所有的卡片，添加css类(以隐藏类)。

在点击“Load-更多”时，它应该会显示另外10张卡--只需从卡片中移除隐藏类。把剩下的牌藏起来。到目前为止，它将显示10 +10(点击事件后)，并隐藏其余的卡片(21张继续，将显示，通过按钮点击)

我不能用Javascript实现这一点。

如果有人能提出解决这个问题的方法。我正在寻找有帮助的意见来解决这个问题。

编辑:我不想实现任何Ajax只是简单的Javascript，在页面加载期间加载，并使用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");
        }
        
        
    }
}
代码语言：javascript
复制
<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
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-16 03:28:32

​

代码语言：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);
    }
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66630906

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档