jQuery-mobile在页面加载时重复打印javascript

Question

我有一个javascript函数，它从json文件读取并将内容打印到菜单网格中，该菜单网格是通过遍历数组并逐一打印而创建的。 我最初遇到的问题是JS根本不会显示，但被告知我的代码需要进入content div才能打印。 现在，JS在内容div中，它将进行打印，但是每次我重新加载页面时，它都会再次打印，并留下两个菜单，如果再次重新加载3个菜单，等等。我尝试放置一个简单的布尔变量和if循环进行打印循环，然后变为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>

Answer 1

感谢@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>

jQuery-mobile在页面加载时重复打印javascript

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-03-01 13:09:07

jQuery-mobile在页面加载时重复打印javascript

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-03-01 13:09:07

解决方案1
0 已采纳 2014-03-01 13:09:07