Question

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

示例：div具有title =＆＃34; robot＆＃34;，并且其中包含机器人的图像。我键入＆＃34;机器人＆＃34;到搜索表单和脚本（oninput？）搜索div标题=＆＃34;机器人＆＃34;并显示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

尝试这样的事情。

function showDiv(value) {
    if (value > 0) {
       $("#noresults").show()
    } 
    else {
       $("#noresults").hide()
    }
}

该值将是文本框中文本的传递长度

Answer 2

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();
    }
});

Answer 3

试试这个：

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

Answer 4

我建议大多使用JQuery，以获得更好/更清晰的代码imho：

$(document).ready(function() { //ensures events are added after the DOM is loaded..
  function showDiv(value) {
     if (value == ' ') {
         $('#noresults').show(); // same as setting style = display: block;
    }
    else {
       $('#noresults').hide(); //same as setting style = display: none;
    }
  }
});

Answer 5

$(document).ready(function(){
    //If you want the image appear on the keyup event
    $('.pure-input-rounded').on('keyup',function(){
        var t=$('.pure-input-rounded').val()
        if(t==='robot'){
            $('#div1 img').show()
            };
        });
    //If you want the image appear on form submit you have to change the input type button/submit
    $('.pure-form').submit(function(event){
        event.preventDefault();
        var t=$('.pure-input-rounded').val()
        if(t==='robot'){
            $('#div1 img').show()
            };
        });
})

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

5 个答案: