Question

这是我的HTML

＆＃13;

$(function(){
    $(".button1").on("click",function(){
        $(".img").css("display","block");
        $(".bord").append('<div class="test1">11111111</div>');
        $(".img").css("display","none");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
         
<div class="parent">
     <div class="button1">button1</div>
     <div class="button2">button2</div>
</div>
            
<div class="bord">
     <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;">
 </div>

＆＃13;

在这里我编写代码，当button1单击显示图像，然后显示文本，然后隐藏图像。但这里的图像没有显示

然后我更改代码，以便显示图像并显示文本，并且它正在运行

＆＃13;

 $(function(){
       $(".button1").on("click",function(){
             $(".img").css("display","block");
             $(".bord").append('<div class="test1">11111111</div>');
       });   
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="parent">
      <div class="button1">button1</div>
      <div class="button2">button2</div>
</div>
                
<div class="bord">
      <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;">
</div>

＆＃13;

那么我的第一个代码中出现了什么问题？

我需要show image->show text-->hide image

请检查。

Answer 1

为了显示.img，浏览器需要经过重排和重绘过程，并且只有在callstack为空（您的代码未运行）时才可能。这意味着当你提出以下内容时：

$(".img").css("display","block");

.img尚未在屏幕上呈现，因为调用堆栈仍然很忙，因此浏览器不执行任何操作并等待代码完成执行。然后你把这段代码

$(".img").css("display","none");

然后返回上一个状态。代码执行完毕后，根本不会发生重排或重绘过程。你没有在屏幕上看到你的按钮。

Answer 2

您正在将+-------------------------------+ | p_id date agent_t~e | |-------------------------------| 207. | 2001 08jul1999 ace_inhib | 208. | 2001 02aug1999 ace_inhib | 209. | 2001 25aug1999 ace_inhib | 210. | 2001 22oct1999 ace_inhib | 211. | 2001 18nov1999 CCB | |-------------------------------| 212. | 2001 18nov1999 ace_inhib | 213. | 2001 14dec1999 CCB | 214. | 2001 12jan2000 CCB | 215. | 2001 03feb2000 CCB | 216. | 2001 03feb2000 arb | |-------------------------------| 217. | 2001 02mar2000 CCB | +-------------------------------+的值更新为quicky。如果添加超时，您将看到图像实际显示然后隐藏。

更改不会直接呈现（请参阅@ Maximus的回答）

添加超时，它可以根据需要使用

＆＃13;

display

＆＃13;

$(function() {

  $(".button1").on("click", function() {

    $(".img").css("display", "block");
    $(".bord").append('<div class="test1">11111111</div>');
    setTimeout(
      function() {
            $(".img").css("display", "none");
      }, 2000);
  });

});

＆＃13;

Javascript没有按照一步一步的说明

2 个答案: