Question

我正在显示一系列对象。有时，我会遇到对象为空的情况。当对象为空时，如何确保HTML标记不显示在页面上？

var eventList = [
  {
    header: "Main Header One",
    title: "This is Title One",
    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim laborum ullam officia sed deleniti libero tempora maxime nulla cum, modi labore ex repudiandae similique.",
    link: "google",
    linkText: "Google"
  },
  {
    //no data in this object. I don't want the card to display at all if there's no data.
    header: "",
    title: "",
    text: "",
    link: "",
    linkText: ""
  },
  {
    header: "Main Header One",
    title: "This is Title One",
    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim laborum ullam officia sed deleniti libero tempora maxime nulla cum, modi labore ex repudiandae similique.",
    link: "yahoo",
    linkText: "Yahoo"
  }  
];


//View
$.each(eventList, function(key, value) {
  $('.list').append(
    `<div class="card mb-3">` +
      `<h5 class="card-header">` + value.header + `</h5>` +
      `<div class="card-body">` +
        `<h6 class="card-title">`  + value.title + `</h6>` +
        `<p class="card-text">` + value.text + `</p>` +
      `</div>` +
      `<div class="card-footer">` +
        `<a href="https://` + value.link + `.com">` + value.linkText + `</a>` +
      `</div>` +
    `</div>`
  );
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="list"><div>
    </div>
  </div>
</div>

Answer 1

您可以使用jquery grep过滤数据并删除包含空字符串的对象，然后可以使用$.each

var eventList = [{
    header: "Main Header One",
    title: "This is Title One",
    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim laborum ullam officia sed deleniti libero tempora maxime nulla cum, modi labore ex repudiandae similique.",
    link: "google",
    linkText: "Google"
  },
  {
    //no data in this object. I don't want the card to display at all if there's no data.
    header: "",
    title: "",
    text: "",
    link: "",
    linkText: ""
  },
  {
    header: "Main Header One",
    title: "This is Title One",
    text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat enim laborum ullam officia sed deleniti libero tempora maxime nulla cum, modi labore ex repudiandae similique.",
    link: "yahoo",
    linkText: "Yahoo"
  }
];

let dataArr = $.grep(eventList, function(n, i) {
  return (n.header !== "" &&
    n.title !== "" &&
    n.text !== "" &&
    n.link !== "" &&
    n.linkText !== ""
  );
});
$.each(dataArr, function(key, value) {

  $('.list').append(
    `<div class="card mb-3">` +
    `<h5 class="card-header">` + value.header + `</h5>` +
    `<div class="card-body">` +
    `<h6 class="card-title">` + value.title + `</h6>` +
    `<p class="card-text">` + value.text + `</p>` +
    `</div>` +
    `<div class="card-footer">` +
    `<a href="https://` + value.link + `.com">` + value.linkText + `</a>` +
    `</div>` +
    `</div>`
  );
});

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


<div class='list'></div>

JavaScript对象为空时如何隐藏HTML输出？

2 个答案: