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

public class Test extends Application {

    @Override
    public void start(Stage primaryStage) {

        HBox root = new HBox();

        Scene scene = new Scene(root, 300, 250);
        VBox c1 = new VBox();
        ImageView i1 = new ImageView(new Image(getClass().getResourceAsStream("home/home.png")));
        ImageView i2 = new ImageView(new Image(getClass().getResourceAsStream("home/contactos.png")));
        ImageView i3 = new ImageView(new Image(getClass().getResourceAsStream("home/info.png")));
        c1.getChildren().addAll(i1, i2, i3);
        VBox c2 = new VBox();
        Button b1 = new Button("home opção1");
        Button b2 = new Button("home opção2");
        c2.getChildren().addAll(b1, b2);
        AnchorPane c3 = new AnchorPane();

        // Set backgrounds
        c1.setBackground(new Background(new BackgroundFill(Color.BLACK, CornerRadii.EMPTY, Insets.EMPTY)));
        c2.setBackground(new Background(new BackgroundFill(Color.GRAY, CornerRadii.EMPTY, Insets.EMPTY)));
        c3.setBackground(new Background(new BackgroundFill(Color.rgb(255,255,148), CornerRadii.EMPTY, Insets.EMPTY)));
        root.getChildren().addAll(c1, c3);
        c1.setOnMouseEntered(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent event) {
                root.getChildren().add(1, c2);
                // Fault transation slide
            }
        });

        c1.setOnMouseExited(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent event) {
                root.getChildren().remove(1);
            }
        });

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

$.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>`
}

Answer 2

这是另一种方法。此操作不会多次append，因为这是一个更昂贵的操作。

const productTmpl = ({was_price, reviews, price, name, img}) => {
  const wasPriceNode = was_price
    ? `<p class="red">£<span class="strike">${was_price}</span></p>` 
    : "<p></p>"
  const reviewsNode = reviews
    ? `<p class="reviews">${reviews}% reviews score</p>` 
    : "<p></p>"

  return `
    <li data-price="${price}"
      data-reviews="${reviews}"
      data-name="${name}"
      data-saving="${was_price}"
    > 
      <div class="spacer'">
        <img src="./img/${img}.jpg"/>
        <h2>${name}</h2>
        <p>£<span class="price">${price}</span></p>
        ${wasPriceNode}
        ${reviewsNode}
        <p>
          <a href="#" class="basket">Add To Basket</a>
        </p>
      </div>
    </li>
  `;
}

$.getJSON(
  "https://raw.githubusercontent.com/Fazyyy/Fazyyy.github.io/master/data/product.json",
  products => {
   const listItems = products.reduce((acc, cur) => acc + productTmpl(cur), "");
   $(".posts").html(listItems);
  }
);

如何在附加语句中运行if语句

2 个答案: