javascript - 如何隐藏未定义的数据

Question

我通过数组传递几条数据，并通过 div 标签输出 HTML。

数组中可能会显示两个事件。但是，如果我没有第二个数据，它仍然会显示图标。

如果对象的该部分不包含任何内容，我想做的是隐藏该行。

我想不通。

var f2fLearning = [  
  {
    f2fTitle: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium",
    f2fCompLong: "Competency",
    f2fCompShort: "compShortName",

    //These must all be the same
    f2fDataTarget: "position6",
    f2fAria: "position6",
    f2fId: "position6",

    //Modal
    f2fViewMore: "modalPosition6",

    f2fDesc: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",

    //1 of 2
    f2fDateSpan1: "May 5-6, 2019",
    f2fLocation1: "Chicago, IL",
    f2fInstructor1: "fName lName",
    f2fProdNum1: "123456789", 

    //2 of 2
    f2fDateSpan2: "",
    f2fLocation2: "",
    f2fInstructor2: "",
    f2fProdNum2: "",  
    
    f2fHidden: ""   
  }
];  


$.each(f2fLearning, function (i) {
  var item = f2fLearning[i];
  html = $("#f2fLearning").html();
  $.each(item, function (key, value) {
    $("#f2fLearning").html(html +
      `<div class="col-sm-12 `+ item.f2fHidden +`">` +
        `<div class="row f-cat" data-cat="`+ item.f2fCompShort +`">` +
          `<div class="accordion" id="accordionExample">` +
            `<div class="card border-1 border-dark-light">` +
              `<div class="row no-gutters">` +
                `<div class="col-md-12">` +
                  `<div class="card-body pb-0">` +
                    `<h5 class="card-title font-weight-bold ism-text-dblue">`+ item.f2fTitle +`</h5>` +
                    `<p class="card-text color-dark font-weight-bold text-italic">Competency Covered: `+ item.f2fCompLong +`</p>` +
                  `</div>` +
                  `<div class="card-header bg-transparent border-0" id="headingOne">` +
                    `<h2 class="mb-0">` +
                      `<button class="btn btn-link p-0 float-right" type="button" data-toggle="collapse"
                        data-target="#`+ item.f2fDataTarget +`" aria-expanded="true" aria-controls="`+ item.f2fAria +`">` +
                        `<span hidden>text</span> <span class="fas fa-angle-double-down fa-w-10 fa-1x ism-text-green"></span>` +
                      `</button>` +
                    `</h2>` +
                  `</div>` +
                `</div>` +
              `</div>` +
            `</div>` +

            `<div id="`+ item.f2fId +`" class="collapse bg-grey" aria-labelledby="headingOne" data-parent="#accordionExample">` +
              `<div class="card-body p-3">` +
                `<p class="card-text mb-3">`+ item.f2fDesc +`</p>` +
                `<a href="#" data-toggle="modal" data-target="#`+ item.f2fViewMore +`Inner"><span class="fal fa-plus-square"></span> View More</a>` +
              `</div>` +
              //New Row
              `<!-- New Row -->` +
              `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>`+ item.f2fDateSpan1 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>`+ item.f2fLocation1+`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>`+ item.f2fInstructor1 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<a href="`+ item.f2fProdNum1 +`" class="btn btn-primary btn-sm text-white">Register</a>` +
                  `</div>` +
                `</div>` +
              `</div>` +

              //New Row
              `<!-- New Row -->` +
              `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>`+ item.f2fDateSpan2 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>`+ item.f2fLocation2 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>`+ item.f2fInstructor2 +`</h6>` +
                  `</div>` +
                  `<div class="col-sm-3">` +
                    `<a href="`+ item.f2fProdNum2 +`" class="btn btn-primary btn-sm text-white">Register</a>` +
                  `</div>` +
                `</div>` +
              `</div>` +
            `</div>` +
          `</div>` +
        `</div>` +
      `</div>`
    );
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/7da1d4bf8c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<div id="f2fLearning"></div>

Answer 1

最好将事件数据添加为数组。然后您可以轻松地循环它，并且在每个循环上您可以检查是否定义了值。现在这里只是检查您现有的代码。对于动态数据来说这不是一个好方法。最好像树形数组一样构建。

var f2flearning = [
    {
        f2ftitle: "sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium",
        f2fcomplong: "competency",
        f2fcompshort: "compshortname",

        //these must all be the same
        f2fdatatarget: "position6",
        f2faria: "position6",
        f2fid: "position6",

        //modal
        f2fviewmore: "modalposition6",

        f2fdesc: "at vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",

        //1 of 2
        f2fdatespan1: "may 5-6, 2019",
        f2flocation1: "chicago, il",
        f2finstructor1: "fname lname",
        f2fprodnum1: "123456789",

        //2 of 2
        f2fdatespan2: "",
        f2flocation2: "",
        f2finstructor2: "",
        f2fprodnum2: "",

        f2fhidden: ""
    }
];


$.each(f2flearning, function (key, value) {
    var item = value;
    
        var newcontent = `<div class="col-sm-12 ` + item.f2fhidden + `">` +
            `<div class="row f-cat" data-cat="` + item.f2fcompshort + `">` +
            `<div class="accordion" id="accordionexample">` +
            `<div class="card border-1 border-dark-light">` +
            `<div class="row no-gutters">` +
            `<div class="col-md-12">` +
            `<div class="card-body pb-0">` +
            `<h5 class="card-title font-weight-bold ism-text-dblue">` + item.f2ftitle + `</h5>` +
            `<p class="card-text color-dark font-weight-bold text-italic">competency covered: ` + item.f2fcomplong + `</p>` +
            `</div>` +
            `<div class="card-header bg-transparent border-0" id="headingone">` +
            `<h2 class="mb-0">` +
            `<button class="btn btn-link p-0 float-right" type="button" data-toggle="collapse"
                        data-target="#`+ item.f2fdatatarget + `" aria-expanded="true" aria-controls="` + item.f2faria + `">` +
            `<span hidden>text</span> <span class="fas fa-angle-double-down fa-w-10 fa-1x ism-text-green"></span>` +
            `</button>` +
            `</h2>` +
            `</div>` +
            `</div>` +
            `</div>` +
            `</div>` +

            `<div id="` + item.f2fid + `" class="collapse bg-grey" aria-labelledby="headingone" data-parent="#accordionexample">` +
            `<div class="card-body p-3">` +
            `<p class="card-text mb-3">` + item.f2fdesc + `</p>` +
            `<a href="#" data-toggle="modal" data-target="#` + item.f2fviewmore + `inner"><span class="fal fa-plus-square"></span> view more</a>` +
            `</div>`;
            
        if (item.f2fdatespan1)
            newcontent += `<!-- new row -->` +
                `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                `<div class="col-sm-3">` +
                `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>` + item.f2fdatespan1 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>` + item.f2flocation1 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>` + item.f2finstructor1 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<a href="` + item.f2fprodnum1 + `" class="btn btn-primary btn-sm text-white">register</a>` +
                `</div>` +
                `</div>` +
                `</div>`;

        if (item.f2fdatespan2)
            newcontent +=  //new row
                `<!-- new row -->` +
                `<div class="card-footer bg-transparent">` +
                `<div class="row no-gutters text-center mb-3">` +
                `<div class="col-sm-3">` +
                `<h6><span class="far fa-calendar-alt ism-text-lblue align-middle mr-2"></span>` + item.f2fdatespan2 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-map-marker-alt ism-text-lblue mr-2"></span>` + item.f2flocation2 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<h6><span class="fas fa-user ism-text-lblue mr-2"></span>` + item.f2finstructor2 + `</h6>` +
                `</div>` +
                `<div class="col-sm-3">` +
                `<a href="` + item.f2fprodnum2 + `" class="btn btn-primary btn-sm text-white">register</a>` +
                `</div>` +
                `</div>` +
                `</div>`;

        newcontent += `</div>` +
            `</div>` +
            `</div>` +
            `</div>`;

        var html = $("#f2flearning").html();
        $("#f2fLearning").html(html+newcontent);
  
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/7da1d4bf8c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>




<div id="f2fLearning"></div>