javascript - 如何在追加语句中运行 if 语句

Question

我正在尝试在追加中运行 if 语句，但无论我期望的结果如何，它似乎都是真的。有问题的代码在第13和14行，代码:

我试过使用典型的方法声明它...... if(xxx != "false") 但这破坏了整个页面并且没有 JS 运行。

 $.getJSON("https://raw.githubusercontent.com/Fazyyy/Fazyyy.github.io/master/data/product.json", function(posts) {
  for(var post = 0; post < posts.length; post++) {
   $(".posts").append("<li " + 
    "data-price='"+ posts[post].price + "'" +
    "data-reviews='"+ posts[post].reviews + "'" +
    "data-name='"+ posts[post].name + "'" +
    "data-saving='"+ posts[post].was_price + "'" +
    ">" +
    "<div class='spacer'>" +
    "<img src='./img/" + posts[post].img +".jpg' />" +
    "<h2>" + posts[post].name + "</h2>" +
    "<p>" + "£<span class='price'>" + posts[post].price + "</span></p>" +
    ( posts[post].was_price != "false" ? "<p class='red'>£<span     class='strike'>" + posts[post].was_price + "</span></p>" : '<p></p>') +
    ( posts[post].reviews != "false" ? "<p class='reviews'>" +     posts[post].reviews + "% reviews score" : '<p></p>') +
    "<p><a href='#' class='basket'>Add To Basket</a></p>" + "</div>" +     "</li>"
    );
  }
});

Answer 1

快速回答是不要。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

您应该遵循 DRY 原则“不要重复自己”来抽象您的问题，并专注于使其易于阅读，并且一切都只有一个责任。

你可以在我的例子中看到它几乎看起来像在 html 中，但在你的例子中你必须努力解析逻辑。

另外几件需要注意的事情是你在做一些 != 'false' 而你必须做 != 而不是 !== 因为你在比较 'false' 和 false。阅读类型相等

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

$.getJSON("https://raw.githubusercontent.com/Fazyyy/Fazyyy.github.io/master/data/product.json", function(posts = []) {
  // appending only after we've created all posts to stop appending multiple times
  appendToPosts(posts.reduce((acc, post) => acc + createPost(post), ''))
});

function appendToPosts(html) {
  $(".posts").append(html);
}


function createPost(post) {
  return `<li
            data-price='${post.price}' 
            data-reviews='${post.reviews}'
            data-name='${post.name}'
            data-saving='${post.was_price}'>
              <div class='spacer'>
                <img src='./img/${post.img}.jpg' />
                <h2>${post.name}</h2>
                <p>£<span class='price'>${post.price}</span></p>
                ${hasPreviousPrice(post)}
                ${hasReviews(post)}
              </div>
         </li>`;
}

function hasPreviousPrice(post) {
  return post.was_price ?
    `<p class='red'>£<span class='strike'>${post.was_price}</span></p>` :
    ``
}

function hasReviews(post) {
  return post.reviews ?
    `<p class='reviews'>${post.reviews}% reviews score` :
    `<p><a href='#' class='basket'>Add To Basket</a></p>`
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="posts"></div>