使用jQuery检测列表项是否均含Complete类并控制按钮显示

嘿，我来帮你搞定这个问题～你当前的代码有个小问题：不管每个列表项有没有complete类，只要循环执行到就会调用show()，导致按钮总会显示，这显然不是你想要的效果。我们需要先确认所有列表项都包含complete类，再决定是否显示按钮。

核心思路 #

两种简单可靠的实现方式：

• 筛选出所有没有complete类的列表项，如果数量为0，说明全部完成
• 遍历所有列表项，检查每一项是否都满足包含complete类的条件

修改后的代码示例 #

方法一：用not()筛选未完成项

这种写法直观易懂，适合快速落地：

jQuery(document).ready(function() {
    // 找出所有不包含complete类的步骤
    const incompleteSteps = jQuery(".wb-steps li").not(".complete");
    
    // 如果没有未完成的步骤，就显示按钮，否则保持隐藏
    if (incompleteSteps.length === 0) {
        $("#steps-complete").show();
    } else {
        $("#steps-complete").hide(); // 确保不满足条件时按钮隐藏
    }
});

方法二：用every()检查所有项

利用原生数组的every()方法，更简洁地判断所有项是否符合条件：

jQuery(document).ready(function() {
    // 将jQuery对象转为原生数组，然后用every判断每一项是否有complete类
    const allStepsComplete = jQuery(".wb-steps li")
        .toArray()
        .every(step => jQuery(step).hasClass("complete"));
    
    // 用toggle方法一键控制显示/隐藏（true显示，false隐藏）
    $("#steps-complete").toggle(allStepsComplete);
});

进阶：支持动态更新类的场景 #

如果后续页面中列表项的类会动态变化（比如用户操作后修改步骤状态），可以把检查逻辑封装成函数，方便重复调用：

function checkAllStepsComplete() {
    const allComplete = jQuery(".wb-steps li")
        .toArray()
        .every(step => jQuery(step).hasClass("complete"));
    
    $("#steps-complete").toggle(allComplete);
}

// 页面加载时执行一次检查
jQuery(document).ready(function() {
    checkAllStepsComplete();
    
    // 示例：假设点击列表项会切换complete类，之后重新检查
    $(".wb-steps li").on("click", function() {
        $(this).toggleClass("complete");
        checkAllStepsComplete();
    });
});

这样就能完美实现你想要的效果：只有当所有步骤都标记为complete时，才显示「Download Now」按钮～

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