时间戳

首页 > 解决方案 > 纯 JS 处理如果内容文本长度 < 0 然后隐藏

javascript - 纯 JS 处理如果内容文本长度 < 0 然后隐藏

问题描述

我尝试处理，
如果内容文本length < 0
然后将类match-name和divider样式设置为display none.
似乎无法使用以下代码。

var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");

for (var i = 0; i < newsMatchName.length; i++) {
  if (newsMatchName[i].length < 0) {
    console.log(newsMatchName[i].length)
    for (var i = 0; i < elem.length; i++) {
      newsMatchName[i].style.display = "none";
      newsMatchNameDivider[i].style.display = "none"
    }
  }
}
<div class="news-content">
  <div class="match-name"></div>
  <div class="divider"></div>
  <div class="title">Title Text</div>
  <div class="footer">
    <span class="author">Author</span>
    <span class="spacer"></span>
    <div class="timeline">
      <span class="date">2021-04-01</span>
      <span class="time">12:15</span>
    </div>
  </div>
</div>

标签： javascripthtmltwitter-bootstrap

解决方案

我测试匹配名称中文本的长度

长度可以是 0 或更大，不能 <0，所以使用

newsMatchName[i].textContent.length === 0

但我建议这样做：

var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");

newsMatchName.forEach((name, i) => {
  const textLen = name.textContent.trim().length;
  name.classList.toggle("hide", textLen === 0);
  newsMatchNameDivider[i].classList.toggle("hide", textLen === 0);
})
.hide {
  display: none;
}
<div class="news-content">
  <div class="match-name"></div>
  <div class="divider">This will be hidden</div>
  <div class="title">Title Text</div>
  <div class="footer">
    <span class="author">Author</span>
    <span class="spacer"></span>
    <div class="timeline">
      <span class="date">2021-04-01</span>
      <span class="time">12:15</span>
    </div>
  </div>
</div>

推荐阅读