我在Webflow上使用集合列表。我想隐藏父div时，2个字段的列表是空的，所以这两个条件必须是真的一起。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();
}
}
});
我不知道webflow收集列表项是如何工作的，但也许你应该尝试console.log你的空$('#example').val()并检查你的浏览器控制台以获取有关如何验证的信息。例如，如果你得到一个"未定义"你可以用if(typeof $('#example').val() == 'undefined')来检查或者如果它只是一个空字符串你可以检查if($('#example').val().length == 0)等等
使用CSS可以更简单地实现这一点。
在Webflow集合列表的和中，直接向集合项添加自定义属性，称为item-found。不需要值
当Webflow呈现此页面时，任何呈现到或集合列表中的项都将包含此自定义属性。
现在，如果我们至少有一个具有item-found属性的子元素，我们只希望包含ID为#collaborators的section或DIV出现。
你可以用这个样式的CSS块来完成;
<style>
#collaborators:not(:has([item-found])) {
display: none;
}
</style>
你可以把它放在你的页面<head>自定义代码区域，但如果你把它直接放在页面内的自定义代码嵌入元素，它也会在设计器中工作。
这是我在本教程中概述的技术的变体;
补充:如果你想要一个快捷方式，我忘了我已经在sygsignal的Webflow Utils库中构建了这个基于属性的功能。