我有少量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"}})
答案 0 :(得分:5)
您不希望将同一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>