Question

我有一个keyup函数来搜索表格上的数据。我想让加载图片只显示一次。例如，如果用户键入"one"，则图像只会出现一次，直到显示结果。

我能够在keyup功能上显示图像，但它会根据用户类型显示。例如，如果用户键入"one"，则图像将显示3次。以下是我的代码示例

$("#search").keyup(function(){
    var search = $("#search").val();
    $("#loading").fadeIn(500);
    $.post('search_pr.php',
    {
        search : search
    })
    .done(function(data){
        $("#loading").fadeOut(500);
        $("#body").html(data);
    });  
});

Answer 1

您可以使用标记，

＆＃13;

$(document).ready(function() {
  $('div#social').hide();

  var facebook = $('#facebookIcon');
  var twitter = $('#twitterIcon');
  var youtube = $('#youtubeIcon');
  var instagram = $('#instagramIcon');
  var snapchat = $('#snapchatIcon');
  var skype = $('#skypeIcon');
  var email = $('#emailIcon');

  $('#twitterIcon').mouseover(function() {
    $('#social').show();
    facebook.fadeOut('slow');
    youtube.fadeOut('slow');
    instagram.fadeOut('slow');
    snapchat.fadeOut('slow');
    skype.fadeOut('slow');
    email.fadeOut('slow');
  });

  $('#twitterIcon').mouseout(function() {
    facebook.fadeIn('slow');
    youtube.fadeIn('slow');
    instagram.fadeIn('slow');
    snapchat.fadeIn('slow');
    skype.fadeIn('slow');
    email.fadeIn('slow');
  });
});

＆＃13;

$(function(){
var load_img = false;
$("#search").keyup(function(){
   var search = $("#search").val();
  
   if(!load_img) {  
       $("#loading").show();      
   }
  load_img = search.length === 0 ? false : true;
  
  if(search.length === 0){
     $("#loading").hide();
  }

  // Rest of your code goes here

  });
});

＆＃13;

#loading{
  display:none;
}

＆＃13;

＆＃13; 但，您应该重置，在输入<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="search" placeholder="search"> <div id="loading"> <i class="fa fa-spinner fa-spin"></i> </div>上将load_img标记为 false >以及focusout or change or blue时，当标志在为真时，当用户键入a时，标志才能绑定length = 0关键词。

重置标记

true

希望这有帮助。

Answer 2

使用全局变量设置附加元素的状态

docker run --link mongo:mongo -v /home/eranga/workspace/clms/daemon:/opt -p 127.0.0.1:8087:8080 custom-node-image

jQuery - 仅在keyup上显示加载图像一次

2 个答案: