如何將某個圖標分配給數據庫值？

Question

我正在使用一個數據庫來告訴我用戶是男性（顯示“M”字母）還是女性（顯示“F”字母）。 我想根據性別而不是字母本身顯示金星/火星圖標（如果是“M”則顯示火星圖標，如果是“F”則顯示金星圖標）。 我怎樣才能做到這一點？

這是我從數據庫中獲取值的方法：

                     <div class="gender" data-bind="text:Sex"></div>

PS：我正在使用很棒的字體圖標

我嘗試分配超棒的字體圖標，但我做的不對。

Answer 1

您可以通過使用 JS DOM 來實現這一點。 只需添加 class M 或 F 它會自動添加 fontawesome 圖標

<div class="gender m" data-bind="text:Sex"></div>

<script>
    if (document.querySelector(".gender.M")) {
        document.querySelector(".gender").innerHTML = `<i class="fa-solid fa-mars"></i>`;
    }
    else {
        document.querySelector(".gender").innerHTML = `<i class="fa-solid fa-venus"></i>`;
    }
</script>