jQuery使用next()方法显示下一个card元素无效如何解决

核心失效原因 #

• 选择器范围错误：原代码用$('.card-standard').next()会匹配页面所有卡片的下一个同级元素，无法定位到当前操作对应的下一张卡片
• 执行时机错误：卡片切换逻辑写在AJAX请求外层，会在点击后立刻执行，完全不等待接口返回结果，不符合「存库成功后才切换」的需求
• 初始状态缺失：没有设置默认隐藏非首屏卡片，页面加载时所有卡片同时展示，切换操作自然没有可见效果

分步实现方案 #

1. 设置卡片初始显示状态 #

默认只展示第一张卡片，其余卡片隐藏，从代码里的mx-auto/mt-4类判断是Bootstrap环境，直接在模板循环里加类即可：

{% for standard in standards %}
<div class="card mx-auto mt-4 card-standard {% if not forloop.first %}d-none{% endif %}" style="width: 95%;" data-aos="fade-up">
    <!-- 卡片内容、.alternative选项按钮放在这里 -->
</div>
{% endfor %}

如果没使用Bootstrap，加一段全局CSS即可实现相同效果：

.card-standard {
    display: none;
}
.card-standard:first-child {
    display: block;
}

2. 修正交互JS逻辑 #

核心改动点：

• 点击选项时先向上查找，定位到当前选项所属的卡片
• 把卡片切换逻辑移到AJAX成功回调内执行
• 处理最后一张卡片提交完成的边界情况
• 动态显示卡片后刷新AOS动画，保证动效正常触发

AOS.init({
    duration: 1200,
})

$(document).on('click', '.alternative', function () {
    const $this = $(this)
    const alternative_pk = $this.data('alternative-pk');
    // 精准定位当前操作所在的卡片
    const $currentCard = $this.closest('.card-standard');
    const url = $('.tabla-standard').data('alternative-url');

    $.ajax({
        url: url,
        method: 'POST',
        data: {
            alternative_pk: alternative_pk,
            csrfmiddlewaretoken: $('[name=csrfmiddlewaretoken]').val() // Django POST请求必填csrf校验
        },
        success: function (json) {
            if (json.success) {
                // 隐藏当前已提交的卡片
                $currentCard.hide();
                // 查找下一张卡片，用nextAll兼容卡片之间存在其他节点的情况
                const $nextCard = $currentCard.nextAll('.card-standard').first();
                if ($nextCard.length) {
                    $nextCard.show();
                    // 刷新AOS，让新显示的卡片正常执行入场动画
                    AOS.refreshHard();
                } else {
                    // 所有卡片提交完成后的逻辑写在这里，比如弹出完成提示
                    console.log('全部提交完成');
                }
            }
        },
        error: function () {
            // 可以在这里加请求失败的提示，比如网络错误时提醒用户重试
            alert('提交失败，请重试');
        }
    });
})

补充说明 #

• 不要用全局选择器$('.card-standard')操作当前卡片，否则多卡片场景下会出现批量操作的bug
• 如果你的卡片之间没有插入其他DOM节点，next('.card-standard')也可以正常使用，nextAll('.card-standard').first()的容错性更高
• AOS默认只在页面初始化时扫描可动画元素，动态插入/显示的元素必须调用AOS.refreshHard()才能正常触发动画

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