繁体   English   中英

Javascript不遵循分步说明

Javascript not following step by step instruction

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

这是我的HTML

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

在这里,我编写代码,当button1单击show image,然后显示文本,然后隐藏image。 但是这里的图片没有显示

然后我更改代码,以便显示图像并显示文本,并且它正在工作

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

那么我的第一个代码是什么问题呢?

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

请检查 。

2 个回复

为了显示.img ,浏览器需要进行重排和重画过程,并且只有在callstack为空(您的代码未运行)时才有可能。 这意味着您放置以下内容:

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

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

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

然后返回到先前的状态。 代码完成执行后,根本不会进行重排或重绘过程。 而且您在屏幕上看不到您的按钮。

您正在将display的值更新为quicky。 如果添加超时,您将看到图像实际上正在显示,然后隐藏。

更改不会直接呈现(请参阅@Maximus的答案)

添加一个超时,它将根据需要工作

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

1 执行指令后(获取步骤)

因此,对于任何指令,在单个总线CPU中: MAR &lt;-PC,读取,PC ++,Tacc,MDR &lt;-总线,IR &lt;-MDR CPU将PC的内容发送到MAR,并在地址总线上发送读取命令。 PC递增,以便指向下一条指令。 此步骤为下一个周期准备CPU。 ...

2 安全复制的分步说明?

不确定问题是否应该在ServerFault上 ? 我在我的服务器上使用Apache凭据进行了一个couchDB设置(但如果分散注意力,我可以关闭它)。 我在各种笔记本电脑上都有本地实例。 现在我想设置安全(连续)复制。 根据我的理解,我可以使用用户名/密码,SSL证书或OAuth。 ...

4 使用 GDB 的步骤数指令

si是第 1 步指令,如何使用 1 个 GDB 命令移动几步? 例如,我想在地址 0xabcd 之后跳过 3 条指令 但这只跳过 1 条指令,而不是 3 条 ...

5 分步说明以运行脱机OpenStreetMaps

我正在尝试在服务器上运行OpenStreetMaps的脱机版本。 我有一个显示OSM映射的ASP.NET MVC应用程序。 到目前为止,我运行了OpenLayers的快速入门示例。 问题是我需要离线所有内容。 我已经下载了planet-latest.osm.bz2文件,但是我对 ...

6 如何制作Android逐步互动教学

这可能是一个模糊的问题,但这是我真的很想知道。 我们开发了一个android应用程序,并且希望在首次使用该应用程序时添加交互式说明。 您如何称呼大多数android应用程序今天具有的帮助/指令的交互? 可以使用android studio完成吗? 感谢您的回复。 ...

2015-07-07 08:37:48 2 113   android
7 在cmd中重定向端口的分步说明

我正在尝试在android中做我的第一个超级简单的聊天应用程序。 我正在尝试遵循本教程[1]: http : //www.edumobile.org/android/android-development/socket-programming/ 我按照描述进行了所有操作,但是在第5点 ...

8 迦太基支持的完整分步说明

我正在寻找逐步教程,以实现对自己的库的迦太基支持。 由于迦太基的工作方式不同于Cocoapods,所以我对整合提出了一些疑问。 当我得到的步骤是下一步: 在仓库的根目录中创建一个名为lib的Xcode项目。 将所有源文件(没有示例文件)包括到您的项目中。 共享Xco ...

9 逐步完成Geany中的每条指令

使用Geany IDE,是否有可能在运行每条指令时逐步执行功能中的每条指令? 我知道许多IDE(包括Eclipse和Visual Studio)都具有此功能,但是我还没有在Geany中找到它。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM