Jquery mobile在加载页面时重复打印javascript
我有一个javascript函数,它读取json文件并将内容打印到菜单网格上,菜单网格是通过运行数组并逐个打印而创建的。 我最初的问题是JS根本不会显示,但我被告知我的代码需要进入content div才能打印出来。现在JS在content div中,它将打印,但每次我重新加载页面时,它会再次打印,留下两个菜单,如果再次加载3个菜单等。我尝试使用简单的布尔变量和if loop打印循环,然后将其设置为false,但由于每次加载页面时都会重新初始化变量,因此我不知所措。这是html&JS代码,如果有人知道我能做什么,我将不胜感激:Jquery mobile在加载页面时重复打印javascript,javascript,html,jquery-mobile,cordova,Javascript,Html,Jquery Mobile,Cordova,我有一个javascript函数,它读取json文件并将内容打印到菜单网格上,菜单网格是通过运行数组并逐个打印而创建的。 我最初的问题是JS根本不会显示,但我被告知我的代码需要进入content div才能打印出来。现在JS在content div中,它将打印,但每次我重新加载页面时,它会再次打印,留下两个菜单,如果再次加载3个菜单等。我尝试使用简单的布尔变量和if loop打印循环,然后将其设置为false,但由于每次加载页面时都会重新初始化变量,因此我不知所措。这是html&JS代码,如果有
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" value="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="Page1">
<div data-role="header" data-theme="c">
<a data-rel="back" data-role="button" class="ui-btn-left" data-transition="flip" data-icon="back"> Back </a>
<a href="info.html" data-role="button" class="ui-btn-right" data-transition="flip" data-icon="info"> Info </a>
<h2>Main Menu</h2>
</div>
<div data-role="content" data-theme="c" id="Page1_Content">
<div class="ui-grid-b">
</div>
<script type="text/javascript">
var json = {
"tcontent": [{
"Chapter": "1",
"Name": "General Principles of Antibiotic Perscribing",
"url":"<a href='general_principles.html'>",
"Background":"yellow"
}, {
"Chapter": "2",
"Name": "Note on meticillin resistant SA",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "3",
"Name": "Empirical Therapy Guidelines:",
"url": "<a href='empirical.html'>",
"Background":"background-color:red"
}, {
"Chapter": "4",
"Name": "Treatment of Malaria",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "5",
"Name": "Antibiotic Prophylaxis:",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "6",
"Name": "Aminoglycoside and Glycopeptide dosing and monitoring:",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "7",
"Name": "Splenectomy: vaccination and antibiotic prophylaxis",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "8",
"Name": "Restricted Antimicrobials",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "9",
"Name": "Topical Antibiotics",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "10",
"Name": "Antimicrobials and Renal Failure",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "11",
"Name": "Antimicrobials and Hepatic Disease",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "12",
"Name": "Administration of IV Antimicrobials",
"url":"<a>",
"Background":"background-color:red"
}, {
"Chapter": "13",
"Name": "Penicillin allergy & other beta-lactam containing antibiotics",
"url":"<a>",
"Background":"background-color:red"
}]
};
var grid= new Array();
grid[0]= "<div class='ui-block-a'>";
grid[1]= "<div class='ui-block-b'>";
grid[2]= "<div class='ui-block-c'>";
grid[3]= "<div class='ui-block-d'>";
var j=0;
var stop=false;
if(!stop){
$(document).on("pageinit", "#Page1", function(){
var toc= '';
$.each(json.tcontent, function(index, item) {
if (j > 2) { j = 0; }
toc += grid[j] + item.url + '<div class="grid">' + "<a><p class='gridtext'>" + item.Chapter + ":" + item.Name + "</p>" + "</div>" + "</a>" + "</div>"
j++;
});
$(toc).appendTo(".ui-grid-b");
});
stop=true;
}
</script>
</div>
<div data-role="footer" data-theme="c">
<h2>(c) Darragh O'Connor </h2>
</div>
</div>
</body>
</html>
主菜单
var json={
“t内容”:[{
“第章”:“1”,
“名称”:“抗生素分类的一般原则”,
“url”:“+”
j++;
});
$(toc)。附录(“.ui-grid-b”);
});
停止=真;
}
(c) 达拉格·奥康纳
感谢@ezanker的建议,我使用了行$(“.ui-grid-b”).empty().append(toc);每次加载页面时清除网格。我遇到了网格未设置的另一个问题,这导致有时第一行上只有一个或两个平铺,但只需移动var j的初始化即可进行修改。我还修改了代码,以便它可以从文件而不是从脚本中读取Json更清晰、更高效。以下是工作代码:
<script type="text/javascript">
var grid= new Array();
grid[0]= "<div class='ui-block-a'>";
grid[1]= "<div class='ui-block-b'>";
grid[2]= "<div class='ui-block-c'>";
var j=0;
$(document).on("pageinit", "#Page1", function(){
var imp= "Json/contents.json";
$.getJSON(imp, function(data) {
j=0;
var toc= '';
$.each(data.tcontent, function(index, item) {
if (j > 2) { j = 0; }
toc += grid[j] + item.url + '<div class="grid" style="background-color:#00ffff;">' + "<p class='gridtext'>" + item.Name + "</p>" + "</div>" + "</a>" + "</div>"
j++;
});
$(".ui-grid-b").empty().append(toc);
});
});
</script>
var grid=新数组();
网格[0]=“”;
网格[1]=“”;
网格[2]=“”;
var j=0;
$(document).on(“pageinit”、“#Page1”,function(){
var imp=“Json/contents.Json”;
$.getJSON(imp,函数(数据){
j=0;
var-toc='';
$.each(data.t内容、函数(索引、项){
如果(j>2){j=0;}
toc+=grid[j]+item.url++“”+item.Name++“
“++”
j++;
});
$(“.ui-grid-b”).empty().append(toc);
});
});
尝试使用localStorage.setItem('flag','true')并将此值作为localStorage.getItem('flag')获取,您可以根据需要在每个循环中设置和获取..更多…1)2)您可以检查nav是否包含任何项:if($(“.ui-grid-b>div”).length>0)//无需填充,或者您也可以在每次填充nav之前清空nav:$(“.ui-grid-b”).empty().append(toc);