if 语句中的多个条件不适用于 Webflow答案

【问题标题】：Multiple conditions in if statement not working on Webflowif 语句中的多个条件不适用于 Webflow
【发布时间】：2022-12-26 08:12:11
【问题描述】：

我在 Webflow 上使用收藏列表。当列表中的 2 个字段为空时，我想隐藏父 div，因此两个条件必须同时为真。 Webflow 有时对 Jquery 很棘手，所以我尝试了几种不同的方法但没有成功。我究竟做错了什么？

使用 webflow 类 .w-dyn-bind-empty 搜索空集合项 & 添加一个带有 display:none 的类，如果语句为真：

$(document).ready(function() {
var width = $(window).width();
if (width < 992) {
        var con = $("#contractor"),
            photo = $("#photography");
        if (con.hasClass('.w-dyn-bind-empty') && photo.hasClass('.w-dyn-bind-empty')) {
                $("#collaborators").addClass('is--off');
        }
    }
});

或者检查空值并使用 .hide：

$(document).ready(function() {
var width = $(window).width();
if (width < 992) {
        var con = $("#contractor").val(),
            photo = $("#photography").val();
        if (con == "" && photo == "") {
                $("#collaborators").hide();
        }
    }
});

【问题讨论】：

标签： jquery if-statement conditional-statements webflow

【解决方案1】：

我不知道 webflow 集合列表项是如何工作的，但也许你应该尝试 console.log 你的空 $('#example').val() 并检查你的浏览器控制台以获取有关如何验证的信息。例如，如果你得到一个“未定义”，你用if(typeof $('#example').val() == 'undefined')检查它，或者如果它只是一个空字符串，你检查if($('#example').val().length == 0)等等......

【讨论】：

【解决方案2】：

您可以使用 CSS 更简单地完成此操作。

在两个都在 Webflow 集合列表中，直接将自定义属性添加到收藏品，称为item-found。它不需要值。

当 Webflow 呈现此页面时，任何项目呈现到任何一个集合列表将包含此自定义属性。

现在，如果我们至少有一个具有 item-found 属性的子元素，我们只希望包含 ID 为 #collaborators 的部分或 DIV 出现。

你可以用这个样式的 CSS 块来完成它；

<style>
#collaborators:not(:has([item-found])) {
  display: none;
}
</style>

你可以把它放在你的页面<head>自定义代码区域，但如果你直接把它放在页面内的自定义代码嵌入元素中，它也可以在设计器中工作。

这是我概述的技术的变体 in this tutorial；

【讨论】：