javascript - 在模板文字中，如何根据条件隐藏元素？

Question

我已经设置了一个模板文字，它将事件列表提供给页面。还有一个“加载更多”按钮，每次单击该按钮时都会向页面推送一个附加事件。

我已经有了一个三元语句，表明如果事件列表为空，则会显示一条消息“这里什么都没有”。将显示。

...但“加载更多”按钮仍然显示。如果没有事件，则不应有“加载更多”按钮。

当事件数组为空时，如何隐藏“加载更多”按钮。

const events = [
  {
    eventsLink: "",
    eventsTitle: "",
    eventsSubTitle: "",
    eventsText: "",
    eventsRegText: ""
  }
];

// const events = [
//   {
//     eventsLink: "https://dev.to",
//     eventsTitle: "Hello Dev",
//     eventsSubTitle: "Dev is here...",
//     eventsText: "Nextiva is proud to participate in Telarus",
//     eventsRegText: "Register Now"
//   },
//   {
//     eventsLink: "",
//     eventsTitle: "Hello Mozilla",
//     eventsSubTitle: "Mozilla is here...",
//     eventsText: "Held in Napa, the heart of the California",
//     eventsRegText: "Register Coming!"
//   },
//   {
//     eventsLink: "https://www.google.com",
//     eventsTitle: "Hello Google",
//     eventsSubTitle: "Google is here...",
//     eventsText: "Held in Silicon Valley, the heart of the technology",
//     eventsRegText: "Register Today!"
//   }
// ];

function eventsPageTemplate(event) {
  return `
    ${
      (event.eventsTitle,
      event.eventsSubTitle,
      event.eventsText,
      event.eventsRegText
        ? `
        <div class="col-sm-12 col-md-6 col-lg-4 event-item">
          <div class="card m-1">
            <div class="card-body">
              <h5 class="card-title">${event.eventsTitle}</h5>
              <h6 class="card-subtitle mb-2 text-muted">${
                event.eventsSubTitle
              }</h6>
              <p class="card-text">${event.eventsText}</p>
              ${
                event.eventsLink
                  ? `<a href="${event.eventsLink}" class="card-link stretched-link">${event.eventsRegText}</a>`
                  : ``
              }
            </div>
          </div>
        </div>
      `
        : `
        <div class="col-sm-12">
          <div class="card">
            <div class="card-body">
              There's nothing here.
            </div>
          </div>
        </div>
      `)
    }
    `;
}

document.getElementById("eventsList").innerHTML = `${events
  .map(eventsPageTemplate)
  .join(" ")}`;

//load more functionality
let list = document.querySelector("#listEvents");
let items = Array.from(list.querySelectorAll(".event-item"));
let loadMore = document.getElementById("loadMore");
maxItems = 1;
loadItems = 1;
hiddenClass = "hiddenStyle";
hiddenItems = Array.from(document.querySelectorAll(".hiddenStyle"));

items.forEach(function (item, index) {
  console.log(item.innerText, index);
  if (index > maxItems - 1) {
    item.classList.add(hiddenClass);
  }
});

loadMore.addEventListener("click", function () {
  [].forEach.call(
    document.querySelectorAll("." + hiddenClass),
    function (item, index) {
      if (index < loadItems) {
        item.classList.remove(hiddenClass);
      }

      if (document.querySelectorAll("." + hiddenClass).length === 0) {
        loadMore.style.display = "none";
      }
    }
  );
});

.hiddenStyle {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container p-3" id="listEvents">
  <div class="row" id="eventsList"></div>
  <div class="row mt-3">
    <div class="load-more-button mx-auto">
      <a class="btn btn-md btn-primary text-white" id="loadMore">Load More</a>
    </div>    
  </div>  
</div>

标签： javascripthtmlcss

Answer 1

我不确定你打算做什么[].forEach.call(...)。

加载更多按钮的 onclick 处理程序确实被触发。您需要重新组织点击处理程序逻辑：

• 首先执行 querySelectorAll 以查找列表项。
• 如果没有，则将按钮显示设置为无。
• 否则，恢复您现有的删除元素子集的隐藏类的逻辑。

请参阅下面的工作片段。

const events = [
  {
    eventsLink: "",
    eventsTitle: "",
    eventsSubTitle: "",
    eventsText: "",
    eventsRegText: ""
  }
];

// const events = [
//   {
//     eventsLink: "https://dev.to",
//     eventsTitle: "Hello Dev",
//     eventsSubTitle: "Dev is here...",
//     eventsText: "Nextiva is proud to participate in Telarus",
//     eventsRegText: "Register Now"
//   },
//   {
//     eventsLink: "",
//     eventsTitle: "Hello Mozilla",
//     eventsSubTitle: "Mozilla is here...",
//     eventsText: "Held in Napa, the heart of the California",
//     eventsRegText: "Register Coming!"
//   },
//   {
//     eventsLink: "https://www.google.com",
//     eventsTitle: "Hello Google",
//     eventsSubTitle: "Google is here...",
//     eventsText: "Held in Silicon Valley, the heart of the technology",
//     eventsRegText: "Register Today!"
//   }
// ];

function eventsPageTemplate(event) {
  return `
    ${
      (event.eventsTitle,
      event.eventsSubTitle,
      event.eventsText,
      event.eventsRegText
        ? `
        <div class="col-sm-12 col-md-6 col-lg-4 event-item">
          <div class="card m-1">
            <div class="card-body">
              <h5 class="card-title">${event.eventsTitle}</h5>
              <h6 class="card-subtitle mb-2 text-muted">${
                event.eventsSubTitle
              }</h6>
              <p class="card-text">${event.eventsText}</p>
              ${
                event.eventsLink
                  ? `<a href="${event.eventsLink}" class="card-link stretched-link">${event.eventsRegText}</a>`
                  : ``
              }
            </div>
          </div>
        </div>
      `
        : `
        <div class="col-sm-12">
          <div class="card">
            <div class="card-body">
              There's nothing here.
            </div>
          </div>
        </div>
      `)
    }
    `;
}

document.getElementById("eventsList").innerHTML = `${events
  .map(eventsPageTemplate)
  .join(" ")}`;

//load more functionality
let list = document.querySelector("#listEvents");
let items = Array.from(list.querySelectorAll(".event-item"));
let loadMore = document.getElementById("loadMore");
maxItems = 1;
loadItems = 1;
hiddenClass = "hiddenStyle";
hiddenItems = Array.from(document.querySelectorAll(".hiddenStyle"));

function refreshLoadButtonState() {
  const hiddenElems = Array.from(document.querySelectorAll("." + hiddenClass));
  if (hiddenElems.length === 0) {
    loadMore.style.display = "none";
    return;
  }
  
  hiddenElems.forEach((item, index) => {
    if (index < loadItems) {
        item.classList.remove(hiddenClass);
    }
  });
}

items.forEach(function (item, index) {
  console.log(item.innerText, index);
  if (index > maxItems - 1) {
    item.classList.add(hiddenClass);
  }
});

loadMore.addEventListener("click", refreshLoadButtonState);

refreshLoadButtonState();

.hiddenStyle {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container p-3" id="listEvents">
  <div class="row" id="eventsList"></div>
  <div class="row mt-3">
    <div class="load-more-button mx-auto">
      <a class="btn btn-md btn-primary text-white" id="loadMore">Load More</a>
    </div>    
  </div>  
</div>