时间戳

首页 > 解决方案 > 如何在呈现后立即显示动态 html 代码并在其上调用动态 jquery

javascript - 如何在呈现后立即显示动态 html 代码并在其上调用动态 jquery

问题描述

我正在开发 React Typescript 应用程序。我从 api 调用响应中获取一些 html 及其 jQuery 脚本。我想从组件渲染该 html，并希望在 html 渲染后立即调用该 jQuery 脚本。这是示例。

html代码：

<div>
<div id="day">This is day div</div> 
<div id="night">This is night div</div>
<div>

jQuery代码：

$('#day').show();
$('#night').hide();

因此，当组件加载时，两个 div 都将被渲染，但之后 jquery 将运行并隐藏夜间 div，只有白天 div 应该是可见的。

标签： javascriptjqueryreactjstypescript

解决方案

在开始时在要隐藏的元素上声明一些不显示的样式标签（JQuery .show 和 .hide 在 display:block 和 display:none 之间发生变化，因此接下来对 .show 和 .hide 的调用可以正常工作）：

<div id="day" style="display:block;">This is day div</div> 
<div id="night" style="display:none;">This is night div</div>

如果您想不惜一切代价使用Javascript，那么您可以在 div 块之后添加一个标签（只是）。如果块在 div 之后，那么 div 将可用于修改 Javascript 代码。

但是可能 JQuery 还不可用，因为 JQuery 通常被推荐在页面底部加载。您可以更改 JQuery 加载位置，也可以使用简单的 Javascript：

document.getElementById("day").style.display = "none";

或者您也可以隐藏所有页面内容，直到调用 .ready。

推荐阅读