gpt4 book ai didi

javascript - 一个 html 文件中正在处理大量数据(过载)

转载 作者:行者123 更新时间:2023-11-28 07:51:42 29 4
gpt4 key购买 nike

问题:

我遇到的问题是我的应用程序运行缓慢,因为我在一个文件 (index.html) 中运行了太多页面(page1.html、page2.html 和 page3.html),重点是让用户决定他/她想查看哪个页面。我尝试过不同的 jQuery 事件,但没有一个适合我。

我想要实现的目标是:编写一个 jQuery 代码来监听用户单击了哪个页面,然后显示图表。我只想一次显示一个图表,其余的必须完全闲置。

Index.html:它由一个导航菜单组成 <div class="collapse navbar-collapse"..></div>并且可以使用 jQuery 在 page1.html、page2.html 和 page3.html 之间导航。

<html>
<head>
<!--Library-->
</head>
<body>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a id = "DataOne" data-target="1"><span class="glyphicon glyphicon-home" style="font-size:25px;" aria-hidden="true"></span></a></li>
<li><a id = "DataTwo" data-target="2"><span class="glyphicon glyphicon-list-alt" style="font-size:25px;" aria-hidden="true"></span></a></li>
<li><a id = "DataThree" data-target="3"><span class="glyphicon glyphicon-stats" style="font-size:25px;" aria-hidden="true"></span></a></li>
</ul>
</div>

<!--Display only one page at time-->
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>
</body>

<script>
$('[data-target]').on('click', function() {
var target = $(this).attr('data-target');
if (target == 1) {
$("#page1").load("page1.html");
} else if(target == 2){
$("#page2").load("page2.html");
} else if(target == 3){
$("#page3").load("page3.html");
}
});
</script>
</html>

最佳答案

这是一个小插曲: http://plnkr.co/edit/dMym8VSXNONGuFgls2p5?p=preview

并修改您的代码:

<!DOCTYPE html>
<html>

<head>
<!--Library-->
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="page-links" id="DataOne" data-target="1">
<span class="glyphicon glyphicon-home" style="font-size:25px;" aria-hidden="true">Page 1</span>
</a>
</li>
<li>
<a class="page-links" id="DataTwo" data-target="2">
<span class="glyphicon glyphicon-list-alt" style="font-size:25px;" aria-hidden="true">Page 2</span>
</a>
</li>
<li>
<a class="page-links" id="DataThree" data-target="3">
<span class="glyphicon glyphicon-stats" style="font-size:25px;" aria-hidden="true">Page 3</span>
</a>
</li>
</ul>
</div>
<!--Display only one page at time-->
<div id="page"></div>
<script>
$(document).ready(function() {
$('.page-links').click(function() {
$('#page').load('page' + $(this).data('target') + '.html');
});
});
</script>
</body>

</html>

更正说明:

  • 您的脚本标签在标签下方,而本应在标签上方。

  • 现在包含 jQuery

  • 我们等待 $(document).ready 事件,这意味着当我们尝试监听事件(例如单击或对其应用更改,例如加载另一个页面)时,我们将知道我们的文档已准备就绪。

不同的页面不需要多个 div,我们有一个 div (#page),我们可以在其中加载我们想要的任何子页面。

关于javascript - 一个 html 文件中正在处理大量数据(过载),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30368405/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com