代码之家 › 专栏 › 技术社区 › Yohan

搜索后隐藏/显示DIV

css html javascript

Yohan · 技术社区 · 6 年前

我正在尝试在我的网站上做一个搜索表单,我不知道如何比较字符串,或者是否编码正确。当用户在搜索栏中键入DIV的ID时,我希望我的DIV消失,但是当我尝试比较字符串时,什么也不会发生。

这是我的代码:

<body>
  <h1 class="title">News Journal</h1>
  <h6 class="motto">What's better than having multiple sources ?</h6>
  <input type="text" class="search" placeholder="Search for a website..." id="search">


  <div id="news-container">
    <p class="mostViewed">Most visited news websites...</p>
    <div class="container">

      <div class="divCNN" id="cnn">
        <a target="_blank" href="https://www.cnn.com/"><img src="https://pmcdeadline2.files.wordpress.com/2016/11/cnn-logo-2.jpg?w=892&h=598&crop=1" class="CNN"></a>
        <p class="description">CNN was founded in 1980 by American media proprietor Ted Turner as a 24-hour cable news channel. It was the first all-news television channel in the United States and CNN website has an average of 112 millions unique monthly visitors.<a target="_blank" href="https://www.cnn.com/"> Visit !</a></p>
      </div>
    </div>
  </div>
</body>

我的javascript:

function Search() {
  var string = +document.getElementById("search").value;
  if (string == "cnn") {
    document.getElementById("cnn").style.display = 'none';
  }
  else {
    document.getElementById("cnn").style.display = 'inline-block';
  }
}
document.addEventListener("keyup", Search);
</script>

1 回复 | 直到 6 年前

Takit Isy Surendra 6 年前

+ 将尝试将值转换为数字。如果该值不能转换为数字,则返回 NaN

变化 var string = +document.getElementById("search").value;

到

var string = document.getElementById("search").value;

function Search() {
  var string = document.getElementById("search").value;
  if (string == "cnn") {
    document.getElementById("cnn").style.display = 'none';
  }
  else {
    document.getElementById("cnn").style.display = 'inline-block';
  }
}
document.addEventListener("keyup", Search);

<h1 class="title">News Journal</h1>
<h6 class="motto">What's better than having multiple sources ?</h6>
<input type="text" class="search" placeholder="Search for a website..." id="search">


<div id="news-container">
  <p class="mostViewed">Most visited news websites...</p>
  <div class="container">

    <div class="divCNN" id="cnn">
    <a target="_blank" href="https://www.cnn.com/"><img src="https://pmcdeadline2.files.wordpress.com/2016/11/cnn-logo-2.jpg?w=892&h=598&crop=1" class="CNN"></a>
    <p class="description">CNN was founded in 1980 by American media proprietor Ted Turner as a 24-hour cable news channel. It was the first all-news television channel in the United States and CNN website has an average of 112 millions unique monthly visitors.<a target="_blank" href="https://www.cnn.com/"> Visit !</a></p>
    </div>
  </div>
</div>