if 語句中的多個條件不適用於 Webflow

Question

我在 Webflow 上使用收藏列表。 當列表中的 2 個字段為空時，我想隱藏一個父 div，因此這兩個條件必須同時為真。 Webflow 有時對 Jquery 很棘手，所以我嘗試了幾種不同的方法但沒有成功。 我究竟做錯了什么？

使用 webflow class.w-dyn-bind-empty 搜索空集合項並添加 class with 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();
        }
    }
});

Answer 1

我不知道 webflow 集合列表項是如何工作的，但也許你應該嘗試 console.log 你的空 $('#example').val() 並檢查你的瀏覽器控制台以獲取有關如何驗證的信息。 例如，如果你得到一個“undefined”，你用if(typeof $('#example').val() == 'undefined')檢查它，或者如果它只是一個空字符串，你檢查if($('#example').val().length == 0)等等...

Answer 2

您可以使用 CSS 更簡單地完成此操作。

在兩個Webflow 集合列表中，將自定義屬性直接添加到Collection Item中，稱為item-found 。 它不需要值。

當 Webflow 呈現此頁面時，呈現到任一集合列表中的任何項目都將包含此自定義屬性。

現在，如果我們至少有一個具有item-found屬性的子元素，我們只希望 ID 為#collaborators的包含部分或 DIV 出現。

您可以使用這種樣式 CSS 塊來實現；

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

您可以將它放在您的頁面<head>自定義代碼區域中，但如果您將它直接放入頁面中的自定義代碼嵌入元素中，它也將在設計器中工作。

這是我在本教程中概述的技術的變體；

if 語句中的多個條件不適用於 Webflow

問題描述

2 個解決方案

解決方案1
1 2022-12-06 18:57:57

解決方案2
0 2022-12-26 00:08:44

if 語句中的多個條件不適用於 Webflow

問題描述

2 個解決方案

解決方案1 1 2022-12-06 18:57:57

解決方案2 0 2022-12-26 00:08:44

解決方案1
1 2022-12-06 18:57:57

解決方案2
0 2022-12-26 00:08:44