javascript - 通过在搜索表单中输入 div 名称/标题来显示隐藏的 div？

Question

我想做的是通过在搜索表单中键入一个词来显示隐藏的 div。 div 包含单个图像。默认情况下所有 div 都是隐藏的，所以它必须取消隐藏 div...

示例:div 具有 title="robot"，并且其中有一个机器人的图像。我在搜索表单中输入“robot”，然后脚本(oninput？)搜索带有 title="robot"的 div 并显示 div/image。

我是脚本/jquery 的新手，似乎无法弄明白，非常感谢任何帮助!这是我找到并试图开始工作的代码，但它没有...

<div id="div1" class="div">
<img class="robot" id="robot" src="robot.jpg" title="robot" style="display:none"></a>
</div>

<form class="pure-form">
<legend></legend>
<input type="text" placeholder="Example: robot" class="pure-input-rounded"     onkeyup="showDiv(this.value)">
<button type="button" name="answer" class="pure-button">Search</button>
</form>

<script>
function showDiv(value) {
if (value.charAt(value.length - 1) == ' ')
document.getElementById('noresults').style.display = "block";
else 
document.getElementById('noresults').style.display = "none";
}
</script>

<div id="noresults" style="display:none" class="results" >No such thing...</div>

Answer 1

jquery解决方案

html

<div class="cardContainer hidden robot">
   <img src="robot.jpg" title="robot" alt="" />
</div>

<div class="cardContainer hidden human">
   <img src="human.jpg" title="human" alt="" />
</div>

<form action="" method="post">
   <input type="text" placeholder="Example: robot" class="pure-input-rounded">
</form>

<div id="noResults" class="hidden">no results</div>

CSS

.hidden
{
  display:none;
}

js

$(".pure-input-rounded").on("keyup", function()
{
  var value = $(this).val();

  if($("." + value).length)
  {
    $(".cardContainer").hide();
    $("." + value).show();   
    $("#noResults").hide();
  }
  else
    {
       $("#noResults").show();
       $(".cardContainer").hide();
    }
});