在 HTML 内使用条件

Question

我正在基于具有几个不同属性的 object 在 javascript 循环中构建一些 HTML。我在这里关心的是 featured。只有少数元素将此设置为 1，其余为 0。

我想要实现的是在 featured == 1 的元素上的 div 中添加徽章 class 和标题“Featured”。

我尝试在 html 块中使用此条件运算符，但现在我的 front-end 仅显示 50-60 div 带有特色徽章，即使我实际上只有 2 个已将 featured 设置为 1，所以我觉得语法可能某处有误。

基本上，我希望 HTML 中的所有其他内容都显示每个元素，但我只希望 div 和 class badges 显示 featured = = 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 class="store-container" style="margin-bottom:15px;">
                  <div class="row">
                    <div class="col-lg-7">
                      <img class="img-fluid" src="${img}">
                    </div>
                    <div class="col-lg-5">`+(featured == 1)?`
                      <div style="" class="badges">
                        <div class="popularContainer">Featured</div>
                      </div>`:`<div></div>
                      <div class="name">
                        <a class="map-trigger" href="#">${area}</a>
                      </div>
                      <div><p style="font-size:10px;">${name}</p></div>

                    </div>
                  </div>
                </div>
                <hr>
            `
    
      });

Answer 1

您基本上缺少三元组周围的大括号 - 因为您将变量放在字符串文字中。

重要部分：

<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 class="store-container" style="margin-bottom:15px;">
                  <div class="row">
                    <div class="col-lg-7">
                      <img class="img-fluid" src="${img}">
                    </div>
                    <div class="col-lg-5">${featured == 1 ?
                      `<div style="" class="badges">
                        <div class="popularContainer">Featured</div>
                      </div>` : `<div></div>`}
                      <div class="name">
                        <a class="map-trigger" href="#">${area}</a>
                      </div>
                      <div><p style="font-size:10px;">${name}</p></div>

                    </div>
                  </div>
                </div>
                <hr>
            `

});

<div id="hold"></div>

在 HTML 内使用条件

Using conditional within HTML

html

javascript

conditional-statements