Question

我有少量div个元素，其中包含不同的文字内容和一个input代码。

<input id="search" type="text"/>

<div class="list>
  <div id="el"> red </div>
  <div id="el"> blue </div>
  <div id="el"> red green </div>
</div>

我想得到这样的东西：如果div的{{1}}等于textContent，则会显示此input.value。否则，它是隐藏的。

示例：

div

我的JS代码：

input.value = "red"
/* "red" and "red green" are displayed, "blue" is hidden */

var search = document.getElementById("search");
var el = document.getElementById("el");

search.addEventListener("keyup", function(){
  if(search.value == el.textContent){
    el.style.display = "block"}
  else{
    el.style.display = "none"}})

Answer 1

您不希望将同一id分配给多个项目。而是使用class。

请参阅下面的工作解决方案：

var search = document.getElementById("search");
var els = document.querySelectorAll(".el");

search.addEventListener("keyup", function() {

  Array.prototype.forEach.call(els, function(el) {
    if (el.textContent.trim().indexOf(search.value) > -1)
      el.style.display = 'block';
    else el.style.display = 'none';
  });

});

<input id="search" type="text" />

<div class="list">
  <div class="el">red</div>
  <div class="el">blue</div>
  <div class="el">red green</div>

</div>

无论输入位于何处，只要它是以空格分隔的（以防万一），这里就是解决方案：

var search = document.getElementById("search");
var els = document.querySelectorAll(".el");

search.addEventListener("keyup", function() {
  Array.prototype.forEach.call(els, function(el) {
    var values = search.value.split(' ');
    var display = true;
    for (var i = 0; i < values.length; i++) {
      if(el.textContent.trim().indexOf(values[i]) === -1)
        display = false;
    }
    
    el.style.display = display ? 'block' : 'none';
  });
});

<input id="search" type="text" />

<div class="list">
  <div class="el">red</div>
  <div class="el">blue</div>
  <div class="el">red green</div>

</div>

使用输入标记

1 个答案: