無法在 Javascript HTML 填充函數中使用條件

Question

我試圖檢查一個空白變量，並讓它輸出一個用括號括起來的變量，或者如果變量為空，則沒有輸出。 問題是我事先需要其他文本/值，所以我不能遺漏一個元素。 該代碼目前僅將條件輸出為文本。

簡化/減少代碼：

function populateSpells(jsonResponse) {
    var data = JSON.parse(jsonResponse.srcElement.response)
    spells = document.getElementById("spellList")
    spells.innerHTML = ''
    data.spells.forEach(spell => {
        spells.innerHTML +=`<div>
    <div class="expBody">
        <p class="spellDispDescExp">Components: ${spell.components} spell.material != "" ? '(${spell.material})' : ''</p>
      </div>
    </div>
    `
}

當前輸出是Components: V, S, M spell.material != ? '(a tiny ball of of bat guano':" Components: V, S, M spell.material != ? '(a tiny ball of of bat guano':"

Answer 1

您可以像放置變量一樣將條件放在模板字符串中：

 let spell = { components: 'stuff', 'material': 'fluff' }; console.log(`<p class="spellDispDescExp">Components: ${spell.components} ${spell.material != "" ? '('+ spell.material + ')' : ''}</p>`); spell.material = ''; console.log(`<p class="spellDispDescExp">Components: ${spell.components} ${spell.material != "" ? '('+ spell.material + ')' : ''}</p>`);