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

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

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>

Answer 2

您应该真正循环而不是重复代码

如果不能，请尝试

$(".card-footer").each(function() {
  if ($(this).find("a").attr("href")=="") $(this).hide()
});

创建列表后

如何隐藏未定义的数据

2 个答案: