Webflow中if多条件判断隐藏父div失效问题排查

你的两段代码未生效，是同时踩了jQuery语法错误、Webflow渲染时机特殊、API误用三类问题，逐个拆解：

方案1的错误点 #

• 语法错误：jQuery的hasClass()方法参数只接收纯类名字符串，不需要带类选择器的.前缀。你写的con.hasClass('.w-dyn-bind-empty')会去匹配类名本身包含.的元素，永远返回false，正确传参应为w-dyn-bind-empty。
• 执行时机错误：$(document).ready触发时，Webflow的动态集合内容还未完成渲染，标记空状态的.w-dyn-bind-empty类还没被挂载到对应元素上，判断逻辑执行过早，拿不到真实的类状态。

方案2的错误点 #

• 同样存在执行时机过早的问题，DOM就绪阶段动态字段还未渲染，无法读取到实际内容。
• API误用：.val()方法仅适用于input、textarea、select这类表单控件，Webflow集合输出的文本、图片容器都是普通DOM节点，不存在value属性，调用.val()永远拿不到正确内容。普通节点读取文本内容需要用.text()方法，且必须配合$.trim()去掉Webflow自动生成的换行、空白字符，否则很容易把实际为空的字段误判为有内容。
• 逻辑缺陷：屏幕宽度判断仅在页面首次加载时执行一次，如果用户拖动浏览器窗口改变视口宽度，显示隐藏逻辑不会重新触发，会出现样式错乱。
• 潜在ID冲突问题：如果#contractor、#photography是放在集合列表循环项内的元素，Webflow渲染时会生成多个同ID元素，jQuery的ID选择器只会匹配页面中第一个同ID元素，后续列表项的判断会完全失效，建议用专属类选择器替代ID选择器。

可直接复用的修正代码 #

首先给两个待判断的字段添加专属类：比如给承包商字段加js-contractor-field类，给摄影字段加js-photo-field类，给需要隐藏的父级div加js-collaborators-wrap类，替换原有ID选择器避免循环项ID冲突，之后使用以下代码：

// 封装判断逻辑，方便重复调用
function toggleCollaboratorsBlock() {
  // 屏幕宽度≥992px时默认显示模块，直接终止逻辑
  if ($(window).width() >= 992) {
    $(".js-collaborators-wrap").show();
    return;
  }
  // 遍历所有父级容器，兼容多列表项场景
  $(".js-collaborators-wrap").each(function() {
    const $currentWrap = $(this);
    // 仅在当前容器范围内查找字段，避免跨项匹配错误
    const $conField = $currentWrap.find(".js-contractor-field");
    const $photoField = $currentWrap.find(".js-photo-field");
    // 双重判断：既检查Webflow空类，也检查实际文本内容，兼容特殊渲染场景
    const isContractorEmpty = $conField.hasClass("w-dyn-bind-empty") || $.trim($conField.text()) === "";
    const isPhotoEmpty = $photoField.hasClass("w-dyn-bind-empty") || $.trim($photoField.text()) === "";

    if (isContractorEmpty && isPhotoEmpty) {
      $currentWrap.hide();
      // 如果要通过自定义类控制隐藏，就注释上面的hide，用下面这行
      // $currentWrap.addClass("is--off");
    } else {
      $currentWrap.show();
      // 对应类控制显示的逻辑
      // $currentWrap.removeClass("is--off");
    }
  })
}

// 等页面所有资源（含Webflow动态渲染内容）加载完成后首次执行判断
$(window).on("load", function() {
  toggleCollaboratorsBlock();
  // 监听窗口尺寸变化，加防抖避免频繁触发导致卡顿
  const resizeHandler = $.debounce ? $.debounce(300, toggleCollaboratorsBlock) : () => setTimeout(toggleCollaboratorsBlock, 300);
  $(window).on("resize", resizeHandler);
})

代码已经做了兼容处理，如果页面没引入jQuery防抖插件，会自动通过setTimeout实现简易防抖，不需要额外引入依赖。

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