Question

我有一个输入文本字段，如果任何人试图写入它应该出现加载图像。我尝试了以下代码，但图像没有显示在检查范围内。

    <html>
    <head>
        <title> Delivery Eligibility </title>
    </head>
    <body>


        <div>
            <form>
            Username:<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
    <span class="check"  ></span> <br/>


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(function()
{
  $('.user_name').keyup(function()
  {
        $('.check').show();
        $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
  }
}
</script>

            </form>


        </div>
    </body>
</html>

谁能告诉我哪里出错了？

Answer 1

实际上你有一个错误的结束标记：

$(function () {
    $('.user_name').keyup(function () {
        $('.check').show();
        $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
    }); //<----check this
}); //<----and this

你可以试试这个：

$(function () {
    $('.user_name').keyup(function () {
        $('.check').fadeIn(400, function () {
            $(this).html('<img src="image/ajax-loading.gif" /> ');
        });
    }); //<----this
}); // <---and this

Answer 2

您的代码中有错误的结束标记。

试试这个：

$(document).ready(function(){
 $('.user_name').keyup(function () {
   $('.check').show();
   $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
 }); 
});

Working Example

我建议您将.html()与.fadeIn()完成回调函数放在一起。像这样：

$（'。check'）。fadeIn（400，function（）{ $（this）.html（''）; }）;

试试这个：

$(document).ready(function(){
 $('.user_name').keyup(function(){
    $('.check').show();
    $('.check').fadeIn(400, function(){
        $(this).html('<img src="image/ajax-loading.gif" /> ');
    });
  });
});

Working Example

Answer 3

没有语法错误，效果很好：

Demo

$(function()
{
  $('.user_name').keyup(function()
  {
        $('.check').show();
      $('.check').fadeIn(400).html('<img src="http://placehold.it/16x16" /> ');
  }); // you missed a closing parenthesis here
}); // and here

下次尝试使用您的控制台。消息很明显：

未捕获的SyntaxError：意外的令牌}

Answer 4

您缺少一些结束括号。它应该是：

    <html>
    <head>
        <title> Delivery Eligibility </title>
    </head>
    <body>


        <div>
            <form>
            Username:<input type="text" autocomplete="off" name="user_name" id="user_id" class="user_name" >
    <span class="check"  ></span> <br/>


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(function()
{
  $('.user_name').keyup(function()
  {
        $('.check').show();
        $('.check').fadeIn(400).html('<img src="image/ajax-loading.gif" /> ');
  })
});
</script>

            </form>


        </div>
    </body>
</html>

这是一个有效的演示：http://jsfiddle.net/ZsSfj/

无法使用ajax显示图像

4 个答案: