是否可以仅使用Javascript制作图像搜索过滤器?

SUP

在此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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章