源码权限有限时，动态生成指定span类后显示隐藏div的实现咨询

首先看你现有代码里的几个小问题，先帮你修正，再针对动态生成元素的场景给出更可靠的方案：

1. 基础版（元素在页面加载完成时已存在） #

你原来的选择器写错了！.img-flag-label .img-flag-clearance 是在找拥有 img-flag-label 类的元素内部的 img-flag-clearance 元素，但实际目标元素是同一个span同时拥有这两个类，所以选择器要去掉空格，写成 .img-flag-label.img-flag-clearance。

另外，判断元素是否存在用 length > 0 比 is(':visible') 更直接（如果你的需求是“元素存在就显示提示”，而不是“元素可见才显示”）。修正后的代码：

$(window).on('load', function(){
    const $clearanceTip = $("#isclearance");
    // 选择器修正：同一元素的多个类，无空格
    if ($('.img-flag-label.img-flag-clearance').length > 0) {
        $clearanceTip.show();
    }
});

如果你的需求是元素存在且可见才显示提示，那可以改成：

if ($('.img-flag-label.img-flag-clearance').is(':visible')) {
    $clearanceTip.show();
}

2. 进阶版（元素是动态生成的，比如AJAX加载后出现） #

如果这个Clearance标签是页面加载完成后才动态生成的，window.load 事件可能捕捉不到它的出现。这时候推荐用 MutationObserver 监听DOM变化，这是最高效的方式：

$(function(){
    const $clearanceTip = $("#isclearance");
    // 尽量选择目标元素的直接父容器，而不是body，这样监听范围更小，性能更好
    const targetContainer = document.querySelector('.product-container'); // 替换成实际的父容器选择器
    // 如果不确定父容器，就用body
    // const targetContainer = document.body;

    // 配置监听选项：监听子元素变化，包括子树
    const observerConfig = { childList: true, subtree: true };

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function() {
            const hasClearance = $('.img-flag-label.img-flag-clearance').length > 0;
            if (hasClearance) {
                $clearanceTip.show();
                // 找到目标元素后可以停止监听，避免重复触发
                observer.disconnect();
            }
        });
    });

    // 启动监听
    observer.observe(targetContainer, observerConfig);

    // 初始化时先检查一次，防止元素已经存在于DOM中
    if ($('.img-flag-label.img-flag-clearance').length > 0) {
        $clearanceTip.show();
        observer.disconnect();
    }
});

如果觉得MutationObserver有点复杂，也可以用简单的定时检查方案（虽然性能稍差，但实现简单）：

$(function(){
    const $clearanceTip = $("#isclearance");
    // 每500毫秒检查一次，可根据实际调整间隔时间
    const checkInterval = setInterval(function() {
        if ($('.img-flag-label.img-flag-clearance').length > 0) {
            $clearanceTip.show();
            // 找到后停止检查
            clearInterval(checkInterval);
        }
    }, 500);

    // 页面初始化时先检查一次
    if ($('.img-flag-label.img-flag-clearance').length > 0) {
        $clearanceTip.show();
        clearInterval(checkInterval);
    }
});

关键注意点 #

• 选择器的空格问题：同一元素的多个类选择器不要加空格，加空格代表后代元素
• 动态元素处理：如果元素是异步生成的，必须用DOM监听或定时检查，不能只依赖window.load
• 性能优化：用MutationObserver时尽量缩小监听的DOM范围，不要直接监听整个body

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