DOM中availablediv类存在时脚本条件判断失效问题排查

看起来你遇到了jQuery条件判断没按预期触发的麻烦，我来帮你梳理几个常见的原因和对应的解决办法：

1. 元素是动态加载的（最常见原因） #

你的代码用了$(document).ready()，它只会等待初始DOM结构加载完成。如果.availablediv是页面加载后通过AJAX、弹窗渲染或者其他脚本动态添加的，那在ready事件触发时这个元素还不存在，条件自然不会成立。

修复方案：用MutationObserver监听DOM变化 #

可以通过监听DOM的新增节点，确保元素出现后再执行样式添加：

$(document).ready(function() {
    // 先检查初始DOM中是否存在目标元素
    applyStylesIfAvailable();

    // 创建观察者，监听body下的DOM变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // 当有新节点添加时，再次检查
            if (mutation.addedNodes.length > 0) {
                applyStylesIfAvailable();
            }
        });
    });

    // 开始监听，覆盖子树所有节点变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    function applyStylesIfAvailable() {
        if ($('.availablediv').length > 0) {
            $('head').append(`<style type="text/css">
                .data { width: 5%; }
                .presalesDiv .callPlans h3 { font-size: 15px !important; }
                .handsetDiv .callPlans p { font-size: 14px !important; }
                /* 补充你剩下的样式 */
            </style>`);
            // 样式添加完成后，断开观察者避免重复执行
            observer.disconnect();
        }
    }
});

2. jQuery加载顺序错误 #

如果你的脚本在jQuery文件之前引入，$会被识别为未定义，整个代码块都不会执行。一定要确保jQuery先加载：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 再放你的脚本 -->
<script>
// 你的代码...
</script>

3. 选择器或类名拼写错误 #

先手动验证选择器是否能找到元素：

1. 打开浏览器开发者工具（F12），切换到Console标签
2. 输入$('.availablediv').length并回车
   • 如果返回0：说明类名拼写错误（比如多了空格、少了字母，或者实际是available-div），或者元素根本不在当前DOM中
   • 如果返回大于0：那问题大概率出在执行时机上，回到第一个方案

4. 用原生JS替代验证（排除jQuery问题） #

如果怀疑是jQuery的问题，可以用原生JS的选择器测试：

$(document).ready(function() {
    if (document.querySelector('.availablediv')) {
        // 执行样式添加逻辑
        $('head').append('<style>/* 你的样式 */</style>');
    }
});

先从排查选择器和加载顺序开始，这两个是最容易踩的坑，如果是动态元素的问题，就用MutationObserver来处理，应该就能解决你的问题了。

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