使用jQuery实现Bootstrap卡片上下页切换时上一页按钮失效求解

问题原因 #

HTML规范要求DOM元素的id必须全局唯一，你的代码中存在重复id：id="to-c"同时用在了card-b的Next按钮和card-d的Previous按钮上。jQuery的id选择器$('#to-c')只会匹配页面中第一个出现的对应id元素，导致card-d里的Previous按钮没有绑定上点击事件，点击自然无响应。

修复方案1：修改重复ID快速解决 #

第一步：修改HTML中重复的按钮id #

把card-d里指向card-c的Previous按钮id改为唯一值，比如back-to-c：

<div class="card mt-2" id="card-b">
   ...
   <button type="button" id="to-c" class="btn btn-info">Next</button>
</div>
<div class="card mt-2" id="card-c">
   ...
   <button type="button" id="to-d" class="btn btn-info">Next</button>
   <button type="button" id="to-b" class="btn btn-info">Previous</button>
</div>
<div class="card mt-2" id="card-d">
   ...
   <button type="submit" class="btn btn-info">Submit</button>
   <!-- 修改这里的id -->
   <button type="button" id="back-to-c" class="btn btn-info">Previous</button>
</div>

第二步：补充新增id的点击事件绑定 #

在原有JS代码中新增一行绑定back-to-c的点击事件即可：

$(document).ready(function($) {
        $('#card-c').hide();
        $('#card-d').hide();

        $('#to-b').click(function() {
            showB();
        })

        $('#to-c').click(function() {
            showC();
        })

        $('#to-d').click(function() {
            showD();
        })
        // 新增绑定
        $('#back-to-c').click(function() {
            showC();
        })

        function showB() {
            $('#card-b').show();
            $('#card-c').hide();
            $('#card-d').hide();
        }

        function showC() {
            $('#card-b').hide();
            $('#card-c').show();
            $('#card-d').hide();
        }

        function showD() {
            $('#card-b').hide();
            $('#card-c').hide();
            $('#card-d').show();
        }
});

修复方案2：通用优化方案（推荐） #

如果后续还会新增卡片，建议用自定义属性data-target实现通用逻辑，不用每个按钮单独绑定事件：

第一步：给所有跳转按钮加data-target属性，值为目标卡片的选择器 #

<div class="card mt-2" id="card-b">
   ...
   <button type="button" class="btn btn-info card-switch" data-target="#card-c">Next</button>
</div>
<div class="card mt-2" id="card-c">
   ...
   <button type="button" class="btn btn-info card-switch" data-target="#card-d">Next</button>
   <button type="button" class="btn btn-info card-switch" data-target="#card-b">Previous</button>
</div>
<div class="card mt-2" id="card-d">
   ...
   <button type="submit" class="btn btn-info">Submit</button>
   <button type="button" class="btn btn-info card-switch" data-target="#card-c">Previous</button>
</div>

第二步：简化JS逻辑，统一绑定事件 #

$(document).ready(function($) {
    // 初始隐藏除了第一张外的所有卡片
    $('.card:not(#card-b)').hide();
    
    // 统一绑定所有切换按钮的点击事件
    $('.card-switch').click(function() {
        // 隐藏所有卡片
        $('.card').hide();
        // 显示目标卡片
        $($(this).data('target')).show();
    })
});

这个方案后续新增卡片时，只需要给新卡片加对应的切换按钮、设置好data-target属性即可，不需要修改JS代码，维护成本更低。

内容的提问来源于stack exchange，提问作者user15103024