我正在基于具有幾個不同屬性的物件在 javascript 回圈中構建一些 HTML。我在這里關心的是featured。只有少數元素將此設定為 1,其余為 0。
我想要實作的是將徽章類和標題“精選”添加到特色 == 1 的元素的 div 中。
我嘗試在 html 塊中使用此條件運算子,但現在我的前端僅顯示 50-60 個帶有特色徽章的 div,即使我只有 2 個實際上已將特色設定為 1,所以我覺得語法可能在某處有誤.
基本上,我希望 HTML 中的所有其他內容都顯示為每個元素,但我只希望帶有類的 divbadges顯示元素上的特色 == 1。
我在這里做錯了什么?
stores.forEach(function (store, index) {
var name = store.ttle;
var url = store.link;
var img = store.imgs;
var link = store.link;
var area = store.area;
var featured = store.featured;
storesHtml = `
<div style="margin-bottom:15px;">
<div >
<div >
<img src="${img}">
</div>
<div >` (featured == 1)?`
<div style="" >
<div >Featured</div>
</div>`:`<div></div>
<div >
<a href="#">${area}</a>
</div>
<div><p style="font-size:10px;">${name}</p></div>
</div>
</div>
</div>
<hr>
`
});
uj5u.com熱心網友回復:
您基本上缺少三元組周圍的大括號 - 因為您將變數放在字串文字中。
重要的部分:
<div class="col-lg-5">${featured == 1 ?
`<div style="" class="badges">
<div class="popularContainer">Featured</div>
</div>` : `<div></div>`}
var stores = [{
ttle: 'test',
link: 'https://google.com',
imgs: 'https://picsum.photos/200/300',
area: 'blah',
featured: 1
},
{
ttle: 'hi',
link: 'https://google.com',
imgs: 'https://picsum.photos/200/300',
area: 'yep',
featured: 0
}
];
var storesHtml = document.getElementById('hold');
stores.forEach(function(store, index) {
var name = store.ttle;
var url = store.link;
var img = store.imgs;
var link = store.link;
var area = store.area;
var featured = store.featured;
storesHtml.innerHTML = `
<div style="margin-bottom:15px;">
<div >
<div >
<img src="${img}">
</div>
<div >${featured == 1 ?
`<div style="" >
<div >Featured</div>
</div>` : `<div></div>`}
<div >
<a href="#">${area}</a>
</div>
<div><p style="font-size:10px;">${name}</p></div>
</div>
</div>
</div>
<hr>
`
});
<div id="hold"></div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/480316.html
標籤:javascript html 条件语句
上一篇:匹配特殊字符(#@#!~`%^&()[]}{;')并在perl中將其替換為_(下劃線)
下一篇:列出用戶的關注者時出錯
