在此html文件中,我想添加图像搜索过滤器功能。例如,存在三个图像,其中包括一个火影忍者图像,一个超人图像和一个蝙蝠侠图像。因此,我想添加类似当我键入“ N或n”时的功能,只有火影忍者图像显示隐藏其他两个图像,其余两个图像相同。我认为使图像通过数组运行是可行的,但对于图像却不能,而且我看过很多youtube视频,但其中大多数使用jQuery,electron,但我只想使用Javascript。
文件截图和代码(HTML和CSS)如下:示例图像
HTML:
<body>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search">
</div>
</div>
<div class="image_container">
<img src="images/naruto.png" alt=""
class="actionimages">
<img src="images/batman.png" alt=""
class="actionimages">
<img src="images/superman.png" alt=""
class="actionimages">
</div>
</div>
</body>
CSS:
<style>
body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
</style>
请原谅任何错误。谢谢。
这是我从您的评论中了解到的
var input=document.querySelector('.search');
var images=document.querySelectorAll('.image_container > img');
input.addEventListener('keydown',function(){
for(var i=0; i<images.length;i++)
{
if(new RegExp(this.value).test(images[i].src))
{
images[i].style.display ='block'
}
else
{
images[i].style.display ='none'
}
console.log(images[i].src)
}
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句