Question

我已经尝试了一切，让它在所有平台上运行。我做错了什么？

JS -

$(document).ready(function(){
    $('#gname').keypress(function() {
       if ($(this).val() == "Toys") 
          $('#number').slideDown('fast')
       else 
          $('#number').hide();
    });
});

CSS -

#number { display: none; height: 100px; border: solid 1px #ddd; }

HTML -

Type here:<input type="text" id="gname">
<div id="number">
    Test 
</div>

Answer 1

您的脚本引用了jQuery功能，但不包含jQuery库。请在您的文档中包含jQuery以激活此功能。

在首次使用$：

之前，请将以下内容放在文档的头部

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 2

包含JQuery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

CSS：

#number {
    display:none;
}

JQuery：

$('#gname').bind('keyup change',function(){
    if(this.value.length > 0){
        $('#number').show();
    }
    else {
        $('#number').hide();
    }
});

演示：http://jsfiddle.net/pSLhN/

Answer 3

如果绑定到keyup事件而不是keypress，则事件处理程序运行时该值将被更改：http://jsfiddle.net/azHQz/

$(function(){
    $('#gname').on('keyup', function(event) {
        //if (event.keyCode == 13) {//un-comment this to only check the value when the enter key is pressed
            if ($(this).val() == "Toys")
                $('#number').slideDown('fast')
            else
                $('#number').hide();
        //}//un-comment this to only check the value when the enter key is pressed
    });
});

仅在按下回车键时检查值的演示：http://jsfiddle.net/azHQz/1/

Answer 4

首先，你需要包含jQuery（非常确定你知道这一点，只是把它从演示中删除了，但你需要它。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

然后，你应该检查keyup事件。

$(document).ready(function(){
   $('#gname').keyup(function() {
      if ($(this).val() == "Toys") 
         $('#number').slideDown('fast')
      else 
         $('#number').hide();
   });

}）;

Answer 5

你的来源实际上并没有显示div。 div开始不可见，并且js要么将其滑开或隐藏它，而不是让它可见。

编辑原始问题的PS，我很害怕。现在有很多人遗失了。

编辑：啊，我看到现在已经纠正了。

Answer 6

实际上它工作得很好，因为你给了你的div id display none，所以它在你无法看到的幕后工作。删除display none属性，它应该工作

DEMO

输入文本时显示DIV

6 个答案: