jQuery判断body内特定类元素存在性失效问题求助

嘿，我来帮你搞定这个问题！咱们先捋清楚问题出在哪儿，再一步步解决～

问题根源 #

你当前的代码只在页面首次加载完成时执行了一次判断逻辑——也就是$(document).ready()里的那段代码。不管之后页面里的元素怎么变化（比如修改div的类名、添加/移除元素），这个判断都不会重新运行。这就导致：

• 如果是在页面运行过程中动态修改div的类名，span的状态不会自动更新；
• 要是你修改代码后重新加载页面还出现异常，大概率是缓存或者代码未保存的问题，但核心需求还是需要一个能响应DOM变化的方案。

另外，你尝试的after()和children()函数本身就不适合这个场景：after()是用来插入内容的，和判断元素存在性无关；children()只能查找直接子元素，而且同样是只执行一次检查，不会实时监听变化。

解决方案 #

方案1：封装逻辑为函数，手动触发 #

把显示/隐藏的判断逻辑抽成独立函数，这样不管是页面加载时，还是在修改元素的代码之后，都可以调用这个函数更新span状态：

// 封装判断逻辑
function toggleShowme() {
  // 检查body下是否存在目标元素，length大于0则显示，否则隐藏
  if ($('body').has('.specific-element').length) {
    $('.showme').show();
  } else {
    $('.showme').hide();
  }
}

$(document).ready(function() {
  // 页面加载时初始化状态
  toggleShowme();
  
  // 举个例子：如果是通过按钮修改类名，修改后调用函数更新状态
  $('#changeClassBtn').click(function() {
    $('.specific-element').toggleClass('specific-element specific-element-1');
    toggleShowme(); // 修改类名后立即更新span状态
  });
});

方案2：用MutationObserver自动监听DOM变化 #

如果需要自动响应DOM的动态变化（比如手动在开发者工具里改类名、JS动态修改元素等），可以使用浏览器原生的MutationObserver API，它能实时监听DOM的变化并触发逻辑：

$(document).ready(function() {
  function toggleShowme() {
    // 用toggle简化代码：存在元素则显示，否则隐藏
    $('.showme').toggle($('body').has('.specific-element').length > 0);
  }
  
  // 页面加载时先初始化状态
  toggleShowme();
  
  // 创建观察者实例，DOM变化时触发更新
  const observer = new MutationObserver(function() {
    toggleShowme();
  });
  
  // 配置监听选项：监听body下的子元素变化、元素类名变化
  observer.observe(document.body, {
    childList: true, // 监听子元素的添加/移除
    attributes: true, // 监听元素属性变化
    subtree: true, // 监听后代元素
    attributeFilter: ['class'] // 只监听类名属性变化
  });
});

这个方案的优势是完全自动化，不需要手动调用函数，只要目标元素的类名变化或者元素本身被添加/移除，span的状态就会自动更新。

内容的提问来源于stack exchange，提问作者webta.st.ic